Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Stylish Syntax Highlighter Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Stylish Syntax Highlighter in Your Blog Post.

Information

Many people might even know the name that what is this Syntax Highlighter? So want to tell you that the source code that is made available in any blog post. And the format in which it is added to the post is known as Syntax Highlighter. But now with the passage of time everything is getting advance.

In such a situation, now the Normal Syntax Highlighter has also been made advanced. Now in this you also get to see Syntax Highlighter with Copy Button. And the advantage of this is that without selecting it, you can easily copy all the code from the Text Area Box by clicking on the button.

Syntax highlighting is a attribution of some textbook editors that expose textbook — especially source code — in different colors and sources according to the order of terms. This point eases writing in a structured language similar as a programming language or a luxury language as both structures and syntax crimes are visually different. accentuating doesn't affect the meaning of the textbook itself; it's allowed only for natural anthologies and editors.

Syntax highlighting is a configuration of secondary memorandum, since the highlights aren't part of the textbook meaning, but serve to support it. Some editors also integrate syntax pressing with different features, suchlike as hex checking or code folding, as assistants to editing which are external to the language.

How to Add

So, to add Stylish Syntax Highlighter on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Remove all the CSS code of prettier which is the default in your theme, as shown in the picture below

• After Remove Default CSS Code
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;

<style>
.Pcode{position:relative;background:#000;width:100%;border:1px solid #ff0000;padding:0 13px 10px 13px;margin:30px 0 auto 0;border-radius:5px}
.Pcode b{background:#000;color:#fff;font-size:13px;font-weight:500;position:absolute;top:-18px;left:3%;padding:4px 18px;border:1.3px solid #ff0000;border-radius:10px}
code{display:block;overflow-x:auto;background:#000;color:#fff;font-size:14px;line-height:1.3;word-spacing:0;font-family:Courier New}
.hljs{background:#000;color:#fff}
.hljs-subtr{color:#e7e4eb}.hljs-comment,.hljs-doctag,.hljs-meta,.hljs-quote{color:#af8dd9}.hljs-attr,.hljs-regexp,.hljs-selector-id,.hljs-selector-tag,.hljs-tag,.hljs-template-tag{color:#aefbff}.hljs-bullet,.hljs-params,.hljs-selector-class{color:#f19fff}.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-symbol,.hljs-type{color:#17fc95}.hljs-addition,.hljs-link,.hljs-number{color:#c5fe00}.hljs-string{color:#38c0ff}.hljs-addition,.hljs-attribute{color:#e7ff9f}.hljs-template-variable,.hljs-variable{color:#e447ff}.hljs-built_in,.hljs-class,.hljs-formula,.hljs-function,.hljs-name,.hljs-title{color:#ffc800}.hljs-deletion,.hljs-literal,.hljs-selector-pseudo{color:#ff9e44}.hljs-emphasis,.hljs-quote{font-style:italic}.hljs-keyword,.hljs-params,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-template-tag{font-weight:600}
</style>

Step 2

• After Paste CSS Code
• Search - </body> or &lt;/body&gt;
• Copy this Javascript below and Paste on top of - </body> or &lt;/body&gt;
• Save theme

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

Step 3

• After Save Theme
• Copy this HTML Code and Paste anywhere you like
• Replace HTML and Enter Your Code/Your Text Type
• Replace Your Text and Paste Your Code/Your Text
• Done.

<pre class="Pcode">
<b>HTML</b>
<code class="Code" id="Code">Your Text</code></pre>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.