Thursday, February 21, 2019

How to Add Syntax Highlighter to Code with Prism JS

How to Add Syntax Highlighter in pre code to Code with Prism js JavaScript to Blogger

    How to Add Syntax Highlighter to Code with Prism js JavaScript

    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" />
     
    

    See at Codepen

    The application of JavaScript is very helpful, especially for those of you who have a Blog about the HTML tutorial. Of course Prism JS will really help you, so that the content looks beautiful.

    If you want to change the appearance, please select Prism.css on this page.

    May be useful :)