how to add code snippets to a blog post

I've been wanting to write this post about how to add code snippets to a blog post for awile, but to be honest, I think I was kinda out of my depth. Finally, I sat down and did some concerted googling and have some answers for newbies who aren't really coders (some day, I hope to actually get better at coding, but for now googling and reading will have to do).

There are times when you may want to share some code with readers-- the trick is to make sure the code you want to share doesn't get read as actual code and get executed. My previous attempts at doing this weren't always the best. It turns out that there are a number of ways to embed code snippets and I learned a lot from this stackflow conversation. If you don't want to read through the entire conversation, here are some of the main methods:

1. You could use online services that allow you to copy and paste the code snippet you want to share and then they generate the full embed code for you to copy and paste into your blog post
• http://hilite.me/ (my favorite)
• http://formatmysourcecode.blogspot.co.uk/
• c# code format 
• C# Syntax Highlighter 
• Online syntax highlighting for the masses (my second favorite-- very flexible, you can choose colors, etc.)
2. Store the code you want to share some place such as GitHubGist and then embed it using src code to point to where it's stored (like embedding a Google document). 
3. You could modify your blogger template to recognize and format code snippets
• Syntax Highlighter
• Social Content Locker for blogger

Of the three methods, I found the tools in option #1 the easiest. Option #2 requires storing code snippets somewhere else and option #3 requires modifying the blog template. See below for examples of the same code snippet being shared using the different options listed under #1:

http://hilite.me/

1 2 3 4 5 6 7 8 9 10

<div class='hidden-section-container'> <div class='sh-section-btn'><span>Show</span></div> <div class='h-section-cont shw-box'> <!-- All your text/html below this --> <p>All your content here</p> <!-- All your text/html above this --> </div> </div>

http://formatmysourcecode.blogspot.co.uk/

<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>

c# code format

   1:  <div class='hidden-section-container'>

   2:    <div class='sh-section-btn'><span>Show</span></div>

   3:    <div class='h-section-cont shw-box'>

   4:      <!-- All your text/html below this -->

   5:       

   6:       <p>All your content here</p>

   7:       

   8:      <!-- All your text/html above this -->

   9:    </div>

  10:  </div>

C# Syntax Highlighter

<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>

Online syntax highlighting for the masses (very flexible, you can choose colors, etc.)

<div class='hidden-section-container'>
  <div class='sh-section-btn'><span>Show</span></div>
  <div class='h-section-cont shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>