The documentation for version 3.0.83 (latest version at the time of writing this post) can be found here.
Using SyntaxHighlighter
Before making any changes, please take a backup of your Blogger template you want to customize. Paste the following code before </head> tag in the HTML of your template and save the changes.<link href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css" rel="stylesheet" type="text/css" /> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" type="text/javascript" /> <link href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js" type="text/javascript" /> <script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = "http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/clipboard.swf"; SyntaxHighlighter.all(); </script>
First I added the base files shCore.css and shCore.js needed for the syntax highlighter to work. Then I chose the default theme shThemeDefault.css that comes with white background. Finally, I added the syntax highlighter for Java (shBrushJava.js).
Note that I used a specific version of the library here. Most examples I have seen point to the current version under http://agorbatchev.typepad.com/pub/sh/current, which is fine. However, if you have the HTTPS redirection enabled in your blog, the syntax highlight will not work properly as the Blogger engine will try to get the files from https://agorbatchev.typepad.com/pub/sh/current, which is not available throwing a 404 error.
After we configured the library in the template's head section we have to options make use of the functionality:
pre method: It is the most reliable of the methods as it works everywhere. The only drawback is that any code within the tag has to be escaped.
script method: If we don't want to escape your code we can use this method. Inside the CDATA we can put anything. The problem with script is that it's not supported everywhere, including Blogger.
We will make use of the pre method here. Let's add a pre block with the escaped Java code snippet in your post HTML editor:
<pre class="brush: java">public static void printPersonsWithinAgeRange(
List<Person> roster, int low, int high) {
for (Person p : roster) {
if (low <= p.getAge() && p.getAge() < high) {
p.printPerson();
}
}
}
</pre>
After we save the changes we should see the code highlighted in the post preview:
public static void printPersonsWithinAgeRange(
List<Person> roster, int low, int high) {
for (Person p : roster) {
if (low <= p.getAge() && p.getAge() < high) {
p.printPerson();
}
}
}
Other Themes
There are a few themes available in SyntaxHighlighter which can completely change the look and feel of the highlighted syntax by including the desired CSS. For more information about the themes visit the themes page.If you want to try them out click on the link to theme:
Available Brushes
Pretty much all main programming and scripting languages are supported by the library. We just have to include the brushes we want to use in the head section. Here is a list of the ones supported:
<!-- Action Script 3 --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushAS3.js" type="text/javascript" /> <!-- Bash/Shell --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js" type="text/javascript" /> <!-- Cold Fusion --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushColdFusion.js" type="text/javascript" /> <!-- C# --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js" type="text/javascript" /> <!-- C++ --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js" type="text/javascript" /> <!-- CSS --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js" type="text/javascript" /> <!-- Delphi --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDelphi.js" type="text/javascript" /> <!-- Diff --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushDiff.js" type="text/javascript" /> <!-- Erlang --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushErlang.js" type="text/javascript" /> <!-- Groovy --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushGroovy.js" type="text/javascript" /> <!-- JavaScript --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js" type="text/javascript" /> <!-- JavaFX --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJavaFX.js" type="text/javascript" /> <!-- Perl --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js" type="text/javascript" /> <!-- PHP --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js" type="text/javascript" /> <!-- Plain Text --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js" type="text/javascript" /> <!-- Power Shell --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPowerShell.js" type="text/javascript" /> <!-- Python --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js" type="text/javascript" /> <!-- Ruby --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js" type="text/javascript" /> <!-- Scala --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushScala.js" type="text/javascript" /> <!-- SQL --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js" type="text/javascript" /> <!-- Visual Basic --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js" type="text/javascript" /> <!-- XML --> <script src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js" type="text/javascript" />
