How to Add Syntax Highlighter to Code with Prism JS

JavaScript is the language used to create programs that are used so that the HTML document displayed on a browser becomes more interactive, not just beautiful. In the world of web and coding, in fact JavaScript really helps the work of a Webmaster.

As a Blogger who makes content about Blogging is also greatly helped by the existence of JavaScript developed by programmers. One of the JavaScript that I use is Prism.js.

Prism JavaScript is a lightweight, extensible syntax highlighter, built with modern web standards in mind. This JavaScript will help mark markup code content such as html, CSS, JavaScript, and others.

For example, as shown below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='abovead'>

        <amp-fx-flying-carpet height='250px'>

            <amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>

            </amp-ad>

        </amp-fx-flying-carpet>

    </div>

</b:if>

Then, how do you apply this syntax  highlighter to a Blogger ? I will explain.

Prism JS in Blogger

The first thing you do is install CSS and JavaScript Prism in your template. Open the Blogger.com Dashboard, then go to Theme - Edit HTML.

Copy code below before </head>

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css' rel='stylesheet'/>

And copy this <script> code before</body>

<script src='https://prismjs.com/prism.js'></script>

Prism JavaScript has been installed, and is ready to be applied. For how to implement it, just add the attribute class="language-*type-markup*> only in the <code> tag. I will exemplify.
When you write articles in HTML mode in the Blogger writing panel, you want to load the following code to display to visitors.

<meta type="og:url" content="https://www.amp-blogger.com" />

So the way to show syntax highlighter in <pre> is like this :

<pre>

 <code class="language-html">

  <meta type="og:url" content="https://www.amp-blogger.com" />

 </code>

</pre>

So the result will be like this:

 
<meta type="og:url" content="https://www.amp-blogger.com" />