Breaking

Thursday 27 July 2017

How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting

For most programmers who like writing articles on different type of programs related tutorials,In one way or the other will want their code to highlighter just like the one written on a well known code editor like sublime text, brackets etc. Today we are going to be looking at how to highlight your code on blogger with just a simple code highlighter known as PrismJs.
Are still wondering what's PrismJs ? Check it's official page(website) for more information http://prismjs.com/, it's the second generation of syntax highlighting, it is more lightweight and that doesn't affect your page load time at all.


The overall adding procedure is the same as mentioned on the PrismJS official page but there are yet some modifications need to be made if you want it to work properly on Blogger blogs. In this tutorial i will provide the links to minified version of the codes, once you get the idea about adding it, you can use whatever version you want.

How To Add PrismJs on Your Blogger

•    Firstly login into your blogger site.
•    After you have logged in go to your Dashboard and click on theme
•    Proceed by clicking Edit HTML
•    After the Edit HTML has loaded press CTRL + F  and search for </head>
•    Copy and paste the code given below just before </head>


<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
 

<script type="text/javascript" src="http://prismjs.com/prism.js">

•    Finally Click on save
Tips:Make sure you backup your template before you carry out the procedure given above.

Tips : The links in the script and link tag is only for demo of the code, if you want to use different theme on your hosted website then you can download the version of your choice on PrismJS Download page, upload it to your hosting service and replace the links (prismjs.com/theme/prism.css and prismjs.com/prism.js) with your hosted file's links .

How To Display Code on Your Blogger Using PrismJs

The following example is for displaying HTML codes in your pages, to define any languages you have to edit language-xxx

<pre class='language-markup'>

<code>

// Your HTML Code here

</code>

</pre>

Tip: You can add the class for a language to any parent element and the children elements will inherit the defined language. It is very useful when you just want to display codes of the same language in a page also xxx refer to the language you are writing on eg php.

How To Implement Different Languages

To define languages you just have to change the language-xxxx in the class you can find in <pre> and <code> tags.

    For HTML we will use this tags to wrap the display codes
       
   
<pre class='language-markup'>

    <code>

    // Your HTML Code here

    </code>

    </pre>


    language-markup is used for HTML markups. You may use this for XML codes too.
    CSS will be wrapped into this tags
       

 <pre class='language-css'>

    <code>

    // Your CSS Code here

    </code>

    </pre>

    JavaScript can be wrapped into this

       
   
<pre class='language-javascript'>

    <code>

    // Your JS Code here

    </pre>

    </code>

    JQuery can also be displayed with this.
    Want to learn more than check out the PrismJS homepage

Read also: How to Use Google Prettify Syntax Highlighter With Blogger


How To Implement  Different Themes

The great thing about PrismJS syntax highlighter is that you can make the code blend with your site's overall theme by using different themes provided by PrismJS. There are the following themes available by default for it : default, dark, funky, okaidia, twilight, coy and solarized light

With a single addition of a CSS file you can change the theme for all PrismJS syntax highlighter instances on your blog.
In the first step we added the default theme,
  
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>

<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

   

The http://prismjs.com/themes/prism.css in the first line of code sets the theme to default, while the following sets it to its corresponding theme.

Dark
 
 <link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>

Funky

<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>

Okaidia

<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>
 

Twilight

<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>

Coy

<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>

Solarized Light
  
<link rel="stylesheet" href="http://prismjs.com/themes/prism-solarizedlight.css"/>

   
     
   

Get our updates delivered to your inbox



No comments:

Post a Comment

Want to get all latest updates from DbencoPlanet.com?

Subscribe to DbencoPlanet to get all the latest updates free!