how to show code snippet in blogs [closed]

Question

I have a little blog on blogger.com and I use a simple free template that I found out there. Occasionally I post code snippets about my findings. The code gets formatted in a pretty ugly way. I see out there that some bloggers they have fancy template for showing the code.

Where do I find such template for blogger? Or what can I do to achieve the same thing?

Thanks, mE

Answer 1

I have to regularly insert code snippets into blogposts. The easiest way that I have found is to keep a markdown file on github and then copy the code snippets onto the blog. It comes with full syntax highlighting in the language of your choice. And no plugins and intuitive, easy to use.

For example, if you write in Ruby, All you need to do is to write this

```ruby
  [Your ruby code goes here]
```

As an example, this is a blog post I recently released with syntax highlighting http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

And this is the markdown file that corresponds to the blog posts. https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS: if you want a faster way to edit your markdown, I would also suggest http://dillinger.io/ for fast editing

Answer 2

You can use SyntaxHighlighter, the author has provided a hosted version so you just have to go to your blog template, choose edit HTML and add following code to the beginning of the page

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.all();
</script>

You can see example on my blog