Syntax highlighting with PrismJS for your Blogger
December 16, 2017
As a technical blogger, a person most commonly posts some code snippets on his blogs. These code snippets look beautiful in their respective IDE's but when it comes to posting it on a blog, the code loses its readability as all the code turns into flat text, with no syntax highlighting whether it is a variable, a method or anything else.
Luckily, there exist many code highlighter libraries browsers, that makes code to look beautiful on browsers.
In this article, we will be integrating PrismJs code highlighter library to our blogger account.
Step 1:
Copy the below HTML tags.
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.css' rel='stylesheet' title='style' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.js' type='text/javascript'/>
Step 2:
In your blogger's account, click on "Theme".
Step 3:
Now click on Edit Html button. This will open an editor view containing a lot of HTML tags.
Step 4:
Inside the editor view, search for the </head> tag and paste these lines just above the closing head tag.
VOILA! You have successfully integrated PrismJs to your blogger account.
To make use of this highlighting tool, just paste HTML tags like below with code snippet in between.
Which will look something like this...
Which will look something like this...
0 comments