Saturday, December 28, 2013

How to add source highlighting in Blogger

A lot of blogs on Blogger are about programming, computer engineering, computer science or other similar topics. While all these blogs require some form of source code highlighting, adding it to Blogger can be a little bit tricky. This is a short tutorial about how to add SyntaxHighlighter to your blog.



Go to Blogger's home page. Select drop-down list on the left of "View blog" button. Select "Template" in the drop-down list. Click on the "Edit HTML" button.

Before <head> tag add:
  <!-- Include required JS files -->
  <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
  <!-- Add support for Java sources --> 
  <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
  <!-- Add support for XML sources -->
  <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>

  <!-- Include required css files -->
  <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/shThemeDefault.css" rel="stylesheet" type="text/css" />

Add the following script before </body> tag:
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
  SyntaxHighlighter.all();
</script>
 
Now copy and paste your code to Blogger editor. Than click on "HTML" button in the top-left corner. In the HTML code find the code you pasted and wrap it with the following HTML tag:
<pre class="brush: java">
<!-- Your Java code here --> 
</pre> 


Here is an example of Java code:
public class Main {
  public static void main(String[] argv) {
    System.out.println("Hello source highlighting");
  }
}
You can add support for other language. List of supported languages and corresponding JavaScript files to include can be found here.
For example to add support for C# add the following line before you <head> tag in Template:
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js.js"></script>
And wrap your C# code in following HTML tags:

<pre class="brush: csharp">
<!-- Insert you C# code here --> 
</pre> 

2 comments:

  1. Hi I am Emi from Chennai. Thanks for sharing the informative post about Java technology. It’s really useful for me to know more about this technology. Recently I did Java Course in Chennai at a leading Java Training Institutes in Chennai. This is really useful for me to make a bright career.


    ReplyDelete
  2. Very interesting blog Really excellent information and thank you for giving your valuable information. home tutor in mumbai

    ReplyDelete