How to Install Prism Syntax Highlighter on Blogger Blog

This time I will share How to Make Prism Syntax Highlighter on Blog.
What is Prism Syntax Highlighter?
Prism Syntax Highlighter abbreviated as PSH is a column or box that is used to store programming codes such as HTML, CSS, JAVASCRIPT, QUERY, etc.

With this Syntax Highlighter, the article writing or text is not mixed with the code structure. Visitors will also feel comfortable, because visitors can know the difference between text and code structure.

Actually displaying the code in the article without using Prism Syntax it's possible, but this border frame plays an important role in getting performance on the look of the blog to make it look attractive and cool.

If you are interested in installing Prism Syntax Highlighter, please follow the method below.

Install Prism Syntax Highlighter on Blogger Blog

Here are the steps

1. Login to Blogger then open the Themes menu then click Edit HTML.

2. After that you find the code ]]></b:skin>

3. Copy the code below then paste it directly above the code ]]></b:skin>

//* Prism Syntax Highlighter - trikkerenn.blogspot.com */

pre {
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 user-select: text;
 padding: 0;
 margin: .5em auto;
 white-space: pre;
 word-wrap: break-word;
 overflow: hidden;
 background-color: #323232;
 position: relative;
 padding-top: 33px;
 width: 100%;
 -moz-tab-size: 2;
 -o-tab-size: 2;
 tab-size: 2;
 word-break: normal;
 border-radius: 3px;
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 user-select: text;
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none
}

pre::-webkit-scrollbar,
pre::-moz-scrollbar,
pre code::-webkit-scrollbar,
pre code::-moz-scrollbar,
code::-webkit-scrollbar,
code::-moz-scrollbar {
 display: none
}

pre::before {
 font-size: 18px;
 content: attr(title);
 position: absolute;
 top: 0;
 padding: 9px 0;
 left: 0;
 right: 0;
 color: #555;
 border: 1px solid #f0f0f0;
 display: block;
 margin: 0;
 font-weight: 700;
 text-indent: 15px
}

pre code {
 display: block;
 background: none;
 border: none;
 color: #999;
 padding: 25px 20px 20px;
 font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
 font-size: .85rem;
 white-space: pre;
 overflow: auto
}

code .token.important {
 font-weight: bold
}

code .token.entity {
 cursor: help
}

pre mark,
code mark,
pre code mark {
 background-color: #3498db!important;
 color: #fff!important;
 padding: 2px;
 margin: 0 2px
}

pre[data-codetype='CSSku']:before {
 background-color: #00a1d6
}

pre[data-codetype='HTMLku']:before {
 background-color: #3cc888
}

pre[data-codetype='JavaScriptku']:before {
 background-color: #75d6d0
}

pre[data-codetype='JQueryku']:before {
 background-color: #e5b460
}

4. Next you copy the code below and then place it directly above </head> or </body>

<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Then save the Theme or Template

Now, to use Prism Syntax Highlighter , you must use the calling code below.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">HTML code that has been parsed here</code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css">CSS code that has been minified here</code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">JavaScript code that has been parsed here</code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">JQuery which has been parsed here</code></pre>

Before publishing you should click preview first so there is nothing wrong

DEMO