how to highlight code syntax in blogger

As we can see that there is no special syntax in blogger by which we can highlight the syntax of a code.It is quite easy to do so.we can do this by just inserting few lines of codes in our template html code.You can go through this step by step guide-


1-Open your blogger dashboard and go to template section


 
Here you will see two options customize and Edit HTML.

 Click on the Edit HTML.


2-Copy the script given below-


 <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'/>
<!-- END INCLUDE SyntaxHighlighter Components -->

<!-- INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<!-- END INCLUDE BRUSHES -->
<!-- INIT SyntaxHighlighter -->
<script type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
</script>

3-Paste the code in the HTML of your template just above </head> tag

   
   Click on save template-




4-After saving template open your post editor and open HTML-

  
   After opening the HTML section of your code enclose your code with the given tags-
<pre class="brush:language name(html) in this case"><----your code's HTML----></pre>
  

5-Save the code and publish the post and you will see that- 

open your post in your blog and see the changes-

Comments :

Post a Comment