Sunday 28 February 2016

HOW TO SETUP SYNTAX HIGHLIGHTER FOR BLOGGER

There are a lot of stuff is available for syntax highlighter on google but this one I find better suited for my requirement so feels like sharing with you.

You can get reference here...

When you get logged in in your blogger account follow this step.

Template ----> Edit HTML

Inside the HTML code just before </b:skin> tag paste the following CSS code.

.code { 
background:#f5f8fa; 
background-image:none; 
background-repeat:no-repeat; 
border: solid #5C7B90; 
border-width: 1px 1px 1px 20px; 
color: #000000; 
font: 13px 'Courier New', Courier, monospace; 
line-height: 16px;
margin: 10px 0 10px 10px; 
max-height: 200px; 
min-height: 16px; 
width: 00px
overflow: scroll; 
padding: 28px 10px 10px; width: 90%; 
} 
.code: hover { 
background: #FAFAFA; background-image:none; 
background-repeat:no-repeat; 
}

You can also change the above properties according to your requirement.
How to use this class...?
<pre class="code">  
   //code goes here
</pre>


To use other highlighter paste the following scripts in your Template right before the end of <head>...
<!-- REQUIRED JAVASCRIPT LIBRARIES --> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true; 
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
  SyntaxHighlighter.all(); 
</script>


Here is code to show this highlighter...