Tuesday, April 16, 2013

Embed Syntax highlighter in your blog

 

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

 To integrate it to your blog, just follow the below steps.

1) Login into your blog
2) Goto template -> edit as shown blow

Edit template
 3) Paste the below codes before the </head> tag ends

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
 
Note this is pointing to the Latest released version v2.1.364; older versions can be found at: http://alexgorbatchev.com/pub/sh/ 

4)Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.

This completes the direct embedding of SyntaxHighlighter in your Blog. Now lets proceed how to use it in your posts: Usage: For SyntaxHighlighter 2.0 & above: Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:

<<span class="IL_AD" id="IL_AD12">script type</span>="syntaxhighlighter" class="brush: html"><![CDATA[
#######YOUR CODE############
]]></script> 
 
Note that we have option of using different brushes for highlighting different type of codes..e.g. HTML/ASP/C++ etc In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting: actionscript3 bash, shell c-sharp, csharp cpp, c css     delphi, pas, pascal diff, patch groovy js, jscript, javascript java jfx, javafx perl, pl php plain, text ps, powershell py, python rails, ror, ruby scala sql vb, vbnet xml, xhtml, xslt, html, xhtml Above aliases can be used at: class="brush: alias" while embedding your code in the Blog. Another easy way supported by SyntaxHighlighter is to enclose the code within:

#########YOUR CODE########
The only catch involved out here is, you have to use encoded HTML while embedding within <pre>tags.
Your code can be converted to HTML Encoded using following easy to use Tool:
http://www.string-functions.com/htmlencode.aspx

Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within <pre>tags for correct rendering. Failure to do so might render wrong code, especially < & > brackets.

You can find original post from here      

No comments:

Post a Comment