How to add syntax highlighter or code snippet in blogger | Thetechhoster

byAnonymous -July 23, 2020

0

In website many times when you want to put some code in our web page then there are many options in the market like some plugin available in online which is ready to use but all are compatible with WordPress or something like that type of CMS(Content Management System). But the problem arises when someone tries to use that type of feature in Blogger then we don't have any option or if available but we don't know how to use. In this blog, we will discuss and give live preview of how to use syntax highlighter in the Blogger or Blog Post.

Introduction

Syntax highlighter or code snippet is a feature which gives you the facility to show programming code which is highlight in the website. We simple show our code without any syntax highlighter in the website but that code which shows that is the not optimist way to show them because that code is not well organized and the syntax is not colorful which give a beautiful look and a responsive way to show. So that we use syntax highlighter or code snippet.

Requirement

Bellow is the requirement to use Syntax highlighter

Blogger website
Prism.js CDN

How to use Prism.js in Blogger

To use prism.js, In WordPress their are many plugins are available but Blogger don't support Plugins so here we use CDN. Which is the use as a third party link that give us a facility to use without installation of any type of plugins or any file in our system. Just put the link and use.

Step: 1

Below is the CDN(Content Delivery Network) Which give you to use Syntax highlighter in blogger

CDN of Prism.js


<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>

First one that is <link> tag place between <head> and </head>. Second one that is between <script> and </script>

Now your 50% of work is completed.

Step: 2

Now your programming code put between <pre><code></code></pre> which class attribute use in <code> tag because the class specify which type of code you place inside the <code> that show accourding to that manner.

Step: 3

At the time of the past our code in in <code> tag convert your <html> code to &lg and &lt tag.

List of the language support Prism.js

Markup - markup, html, xml, svg, mathml, ssml, atom, rss
CSS - css
C-like - clike
JavaScript - javascript, js

Tags: Technical solution