Syntax Highlighter For Blogger

Sunday, May 24, 2015

Syntax Highlighter For Blogger

Blogger LogoI was looking for adding syntax highlighting to my code snippets and came across this post... Syntax Highlighting with Blogger Engine...

Let's try it out...

Add code in Blogger template

<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'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
The original author mentioned adding this code block at top of page before </head>, but I added it to the bottom before the </body>. Let's see if this works...

I used the above code as the test code too...

<pre class="brush:xml"> &lt;link href=&#39;http://alexgorbatchev.com/pub/sh/current/styles/shCore.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;/&gt; &lt;link href=&#39;http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;/&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script src=&#39;http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt; &lt;script language=&#39;javascript&#39;&gt; SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;; SyntaxHighlighter.all(); &lt;/script&gt; </pre>

The important piece is <pre class="brush:xml">. I am formatting the code as xml. Possible values are:
  • Cpp
  • CSharp
  • Css
  • Java
  • JScript
  • Php
  • Python
  • Ruby
  • Sql
  • Vb
  • Xml
  • Perl
I will have to publish the blog post before I can verify this working... let's go...

Update: it works great! Yay!

 See also...  » Multilevel List In Blogger Post

» Rearranging Widgets in Blogger

» Ripping off Blog Name from Blog Post Title


ATOzTOA : Latest Headlines