How To Install Prism Syntax Highlighter On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Now I will share with you about the related tutorial Blog. Maybe for you the Blogger certainly need this tutorial because Prism Syntax Highlighter is a great place for you sharers tutorial Blog. Prism is very light so as not to burden your web or blog, Syntax Highlighter is extensible built with standard website or modern present. Visitors can judge that your blog because of the high standards and professional update by using Prism Syntax Highlighter when you share a tutorial to visitors.

Syntax Highlighter Prism advantages are as follows;
➤ Easily erased
Including prism.css and prism.js, use the correct tag HTML5 code (code.language-xxxx), finished!
➤ Light as a feather
The core 2KB minified & Gzipped. Languages and added 0.3-0.5KB each theme is about 1KB.
➤ Extensible
Define a new language or extend existing ones. Adding new features thanks to its plugin architecture Prism
➤ Intuitive
Language classes are inherited, so you can only specify a language for a few snippets of code.
➤ Speed of movement
Supports parallelism with Web Workers, if any.
➤ Simple Style
All done through CSS style, with class names is understandable, comment, string, and other properties.

Prism Syntax Highlighter has been used on thousands of websites and blogs, including the number of sites or blogs that you have visited. Prism done its best to promote the application of good authoring and professional manufacturer. Therefore, it only works with elements for marking up code without a valid semantic elements. According to the HTML5 spec, the recommended way to determine the language code is the class, which is what using Prism. To make things easier, however, Prism assume that the language definition is inherited. Therefore, if the various elements have the same language, you can add a class at one of the causes that are with them. In this way, you can also specify the default language of the document width by adding a class to an element. Great is not it?

Prism Syntax Highlighter makes your blog look professional for your outstanding and is rated as one of the elite bloggers because you share totorial with hard work without relying on instant system. Sharing tutorial with Prism Syntax Highlighter need some process and visitors to feel spoiled by your blog and they will yearn to learn tutorial on your blog. I say this because they will be easier to copy the scripts you share.
That description of me.

For the results you can see on my blog in the article now

To the point, direct us to the tutorial⇨

1. Login to Blogger> Template> Edit HTML in your Blogger panel, and then copy and paste the following CSS above / before ]]></b:skin> or </style> tags⇩

/***************************************************************
Prism Syntax Highlighter By www.BloggerDiscreet.com
***************************************************************/
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #006600;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection and press CTRL+C to copy';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 9px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Open Sans,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 1px 2px;
    margin-top: 10px;
    font-weight: normal;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

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

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='HTML']:before {
    background-color: #00cc00;
}

pre[data-codetype='CSS']:before {
    background-color: #00cc00;
}

pre[data-codetype='JavaScript']:before {
    background-color: #00cc00;
}

pre[data-codetype='jQuery']:before {
    background-color: #00cc00;
}

2. Continue put the JavaScript (JS) above / before </body> or </head> tags⇩

<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Syntax-Highlighter-Blogger-Responsive-By-Rahmat-Arif.js' type='text/javascript'/>

3. Continue put the jQuery above / before </body> or </head> tags⇩

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

4. Use the following HTML to format your article⇩

<pre title="HTML" data-codetype ="HTML"><code class="language-markup"> ... HTML code (which is in Parse) here ... </code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css"> ... CSS code (which is in Parse) here ... </code></pre>
<pre title="JavaScript" data-codetype ="JavaScript"><code class="language-javascript"> ... JavaScript code (which is in Parse) here ... </code></pre>
<pre title="jQuery" data-codetype ="jQuery"><code class="language-javascript"> ... JQuery code (which is in Parse) here ... </code></pre>

5. Save the Template.

6. Immediately create articles on Blogger tutorial by entering the code to each and must be Parse ago here on my Tool menu.

7. Alhamdulillaah, tutorial is ready.