Monday, December 16, 2013

Syntax Highlighter for Blogspot

As you may have noticed, the previous post has some snippets of highlighted code in different languages. For that, I used SyntaxHighlighter.

Here are the instructions for Blogspot:
  1. The latest SH's source code is in GitHub. You'll need to download and compile it as instructed in README.md This will give you a pkg folder containing 2 subfolders: scripts and styles. Note the .js and .css files in those folders. 
  2. You'll need to store the compiled files somewhere and change the Blogger template to reference them. If you have a hosting site, great! If not, use GitHub Page like I did. 
  3. In short, simply follow the instructions there to create a public Page repo, and load the files up there. Now, you may wonder why you can't use raw view from the SyntaxHighlighter repo directly, for example, this. There are two reasons for that: (a) that repo just doesn't have compiled .js and css files, and (b) GitHub has long disabled "hotlink" to javascript files from there. 
  4. Finally, modify your Blogger template to reference these files. Just follow this. In short, include a bunch of <script> and <link> tags to key javascript and css files, then call SyntaxHighlighter.all(). After that, you can use <pre> to indicate your code blocks.

No comments:

Post a Comment