Syntax highlighting for code in blogger

Introduction:

There is no straight forward or simple way to do syntax highlighting to share any code through blogger. But we can easily do that by using some third party service. One such service is highligtjs.org. Use the following steps for code highlighting.

Solution:

We have to work in html view rather than compose view of blogger. For syntax highlighting we have to first add JS script for importing CSS in the header of the html. To do that add the following line at the starting in the html view.


      <head>
 	     <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/androidstudio.min.css">
 	     <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/highlight.min.js"></script>
	     <script>hljs.initHighlightingOnLoad();</script>
      </head>
    

Then start writing inside the body html tag, as following:


      <body>
        [Your text goes here]
      </body>
    

and to enter the code you can use code html tag as following:


    <code class='html'>
      [Your code goes here]
    </code>
  

In the above example we have used "androidstudio" as the style for syntax highlighting. There are several style option available in the highlightjs.org site, and choose what ever style you like, to impliment the style, change the "androidstudio" to the name of your style.


Cheers
A.Paul

Comments

Popular posts from this blog

Changing caption width in latex

Subtitle in latex

Send in Email in Background in Thunderbird