When writing technical articles about programming, one needs to add code snippets for reference from time to time. The following post highlights two methods I find both simple and easy to use.
Github Gist
Think of a Gist as a single source controlled file that can be edited, cloned and shared easily. This is one of my favorite options for sharing small code snippets. It has the added advantage of being version controlled as well.
Instructions
1- Head on over to gist.github.com
2- If you have a github account (which you should) sign in. Start by adding a file name for your gist; the syntax highlighting will automatically be detected by the extension:
3- Make sure to create the gist as "public". Once you do so, you'll see a "embed this gist" link ont he left hand side in the following format:
<script src="https://gist.github.com/<user_id>/<gist_id>.js"/>
SyntaxHighlighter
If you don't want to bother with an external service and you'd rather host your code as part of your site, there is another popular option called SyntaxHighlighter. It's essentially a set of javascripts you can add to your blog/website to easily display syntax-highlighted code in a variety of languages.
Instructions
(based on original instructions from Alex Shirmanov)
1- Go to your blog's html source and add the following in your <head> section.
<!-- SyntaxHighlighter -->
<!-- 1- Core javascript and css -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<!-- 2- Brushes -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- 3- Activate SyntaxHighlighter -->
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Note #1: To edit the layout of a blogger blog, go to Template -> Edit HtmlNote #2: If you have your own hosting capabilities, you might want to upload these files to your own server
2- Notice that in the brushes section (#2) we are loading various javascripts for different programming language syntaxes. For a full list of what's supported, see here. If you need support for a given language, just add an additional reference to shBrushXXX.js where XXX is the language you want support for.
3- We're now ready to add code snippets to your blog. You can do so easily by adding the following html (replacing brush_name with the language of your code snippet):
<pre class="brush: brush_name">
// Enter code here
</pre>
Here is an example with class="brush: scala":
// Hello world in scala
object HelloWorld {
def main(args: Array[String]) {
println("Hello, world!")
}
}
Happy blogging!
