How to Add / Install Syntax Highlighter for Scripts in Blogger Post – SQL, Java, Python, HTML etc

advertisements

_____________________________________________________________________________________________________________________

Step 1: Changes to the blogger script.

Open Blogger-> Design -> Edit HTML

Search for </head> tag

Add the following code Jut above the </head> tag

a.   Green Color Codes are mandatory

b.   Red color codes need to be added depends on the requirement.  There are separate scripts for CPP, C#, CSS, Java, JavaScript, PHP, Phython, Ruby, SQL, VB, XML, Perl, Bash. For example if you want add SQL highlighter you have to include only shBrushSql.js within the green color script. If you have multiple script type, you have to add curresponding scripts.

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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>

Step 2: Add syntax Highlighter script to the individual post

<pre class='brush:<curresponding brush>;'>

<Your script code>

</pre>

For example if you wanted to highlight a sql script you edit the HTML in following way.

<pre class='brush:sql;'>

<Your sql code>

</pre>

Example in Detail:

SQL script to be highlighted is select * from emp;

Goto curresponding post and open Edit HTML and modify the html in following way.

Curresponding HTML Code

<div dir="ltr" style="text-align: left;" trbidi="on">

select * from emp;</div>

HTML Code to be modified as

<pre class='brush:sql;'>

select * from emp;

</pre>

_____________________________________________________________________________________________________________________

Website Stats