2016-01-14

How to insert code snippet in Blogger (Javascript)

Since I like to share my code on this blog (hosted on Blogger), I was looking for a convenient way to include code snippets. I found SyntaxHighlighter Javascript Library (http://alexgorbatchev.com/SyntaxHighlighter/) doing the job quite good.
There are few steps you need to take in order to work.

First, add following code snippet to 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>

Paste this code in Blogger template just above the </head> tag. Include only scripts for languages you plan to use. Save the template and you are ready to write your code in your blog posts.
There are couple of ways to include code, but let me explain the one I use (one with <pre> tag). In both ways you need to switch Blogger post editor to HTML mode and use it like this:

<pre class="brush: csharp">
public void SayHello() {
/* Another Comment
on multiple lines */
Console.WriteLine('Hello');
}
</pre>

the result is:

public void SayHello() {
/* Another Comment
on multiple lines */
Console.WriteLine('Hello');
}
In some cases you might need to HTML encode your code. You can do this with this online encoding conversion: http://www.opinionatedgeek.com/dotnet/tools/htmlencode/Encode.aspx

No comments:

Post a Comment