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


5 comments:

Aryan Arps said...


Nice Information. Thanks for sharing such a nice information.
mock test
home remedies
technology
---------------------------------------------------------------------------------
Nice Information. Thanks for sharing such a nice information.
recruitment
jee main
law
gate
school
neet

suster pk said...

I like the post format as you create user engagement in the complete article. It seems round up of all published posts. Thanks for gauging the informative posts.
cara menggugurkan kandungan

thesis writing service said...

I read this article. I think You put a lot of effort to create this article. I appreciate your work.
thesis Writing Service

Mergers and Acquisitions consultant said...

The blog article very surprised to me! Your writing is good.
In this I learned a lot! Thank you!

Post a Comment