Wednesday, February 6, 2013

Adding code snippets to your blog


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"/>



4- Copy that and embed it in your blog. Here is an example with some ruby code:

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 Html
Note #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!

17 comments:

  1. both didn't work for me, i'm using chrome....
    Did a simple test:

    The second method, i copied and pasted the code above just before the header, but didn't workout.....

    The first method, i copied the script tag into HTML blog but didn't work...

    I'm going to try it out again at home with different browser.

    ReplyDelete
  2. If you're curious, just check out "View page source" on this blog and you can see the SyntaxHighligter scripts being included. Assuming you're able to see the snippets here, it should work with some debugging in your scenario.

    ReplyDelete
  3. Also will you be doing any test on 1&1 free web hostingplans? They offer Wordpress, they have some good price points, and the customer service has been excellent when I used them in the past...

    ReplyDelete
  4. Thanks dude, this totally helped me out.

    ReplyDelete
  5. Blog post writing is a great way to get yourself in-front of potential clients. It will increase traffic to website by getting your content listed in the search engines. This is key for long term traffic growth. Thanks for sharing this post.

    blog post writing service

    ReplyDelete
  6. Operating to be a sports golf club director is often a complicated task. However sports supervision software program makes the duty much easier by managing your hard work and also generating video game accounts routinely. Controlling documents usually looks like it's awkward.outsourcing software development

    ReplyDelete
  7. I have just started learning html from one of the training institute and i love to experiment with web programming as i think it will make you good programmer. Article is really good and interesting.
    html programming

    ReplyDelete
  8. I should thank you for writing on this topic, very useful information you have given through this blog regarding education sector. I will visit again to get more information.

    ReplyDelete
  9. It is an inspiring blog post. The issue handles very nicely. I really appreciate the communication skill of yours and definitely come soon by the time you will complete another write-up.
    Kansas City web development

    ReplyDelete
  10. Nice piece of information on HTML5. With the expansion of smartphones and other portable gadgets, the demand for responsive website design that go comfy on all devices keeps on increasing. This leads to invention and expansion of HTM5 web technology. PHP Training in Chennai | Best PHP training in Chennai | PHP Training Institute in Chennai

    ReplyDelete
  11. The title of your write-up is very eye catchy which holds an individual to read till the very end of your blog. Every new paragraph increases the interest of a reader.
    Professional logo design

    ReplyDelete
  12. I admire your unique way of writing especially the style of using the idioms and phrases which is mind-blowing. I hope you will not mind if I adopt this style of your. Many thanks.
    Professional logo design

    ReplyDelete
  13. I respect your extraordinaryHadoop Training in Chennai
    technique for making particularly the style Hadoop Training in Chennai out of utilizing the expressions and expressions which is stunningness insiring. I trust you wouldn't whine in the event that I get a handle on this style of your. Appreciative.

    ReplyDelete
  14. This is one of my favorite options for sharing small code snippets. It has the added advantage of being version controlled as well. wealth and resources of a country

    ReplyDelete