Thursday 9 May 2013

How to add syntax highlighting to your own blog!

Since I am going to be demonstrating source code this summer... I thought "What about syntax highlighting" in my blog.  So I went ahead and searched online.  There are a number of ways of going about and doing this.  I am choosing to do this with a simple javascript library called 'highlight.js'.  First you can visit this page:

http://softwaremaniacs.org/soft/highlight/en/download/

There you will find the latest version of the syntax highlighting library.

Copy the two links.  At the time of this post I copied these two links:


<link href='http://yandex.st/highlightjs/7.3/styles/default.min.css' rel='stylesheet'/>

<script src='http://yandex.st/highlightjs/7.3/highlight.min.js'/>

<script>hljs.initHighlightingOnLoad();</script>


You must place these references  after the </head> and before the <body> 

 next...

Go to this link: http://softwaremaniacs.org/soft/highlight/en/description/ You will read that it is necessary to place the code according to these instructions.

  "This will highlight all code on the page marked up as <pre><code> .. </code></pre>. If you use different markup or need to apply highlighting dynamically, read "Custom initialization" below."

This should work anywhere.

No comments:

Post a Comment