How To Add Syntax Highlighter on Blogger ?

Hello Everyone, on this occasion I will share How To Add Syntax Highlighter on Blogger without JavaScript with only pure CSS. Syntax highlighter is a text editor feature used to sort different types of programming languages, scripts or markup, such as HTML, CSS, JavaScript, etc.

So this syntax highlighter has to add a class to each code that we will share to color later, we will not write it manually but use an hljs parse tool we have created.

The way the tool works is the same as the parse html tool in general, with the difference being that this tool will also add a class to the code to be colored in addition to parsing the code. For those of you who want to make this, read the post till the end.

How To Add Syntax Highlighter io Blogger :-

Step 1 :- First of all Go To Blogger.Com And Login Your Account.

Step 2 :- Then Click on Edit Html.

Step 3 :- Then Click on Edit Html.

Step 4 :- Then Copy Css Below and Place Above Code ]]></b:skin>

.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-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}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.post-body pre:before{content:'</>';position:absolute;right:0;color:#c5c8c6;font-size:10px;padding:20px 15px;z-index:2;line-height:35px}
.post-body pre.html:before{content:'.html'}
.post-body pre.css:before{content:'.css'}
.post-body pre.js:before{content:'.js'}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px}
code mark{font-size: 13px;margin: 2px;display: inline-block;}
pre code mark{font-size: 13px;margin: 2px;display: inline-block;}

Step 5 :- Then Don't Forget to Click on Save and Then See The Result.

Then if you want to generate code then you can go to Hljs Parse Tool via below button and then paste your code. Afterwards your code will be parsed and classes will be added automatically.

Hljs Parse Tool

You can also add a class to the pre tag to name the type of code you share, see example below.

<pre><code class="html"> For HTML Type Code</code></pre>

<pre><code class="html"> For CSS Type Code</code></pre>

<pre><code class="html"> For JavaScript Type Code</code></pre>

if you want to mark a code you can use <mark> the code will be marked here </mark> for the demo it will look like below.

<pre><code>
The Codes Marked By You Have Been Parsed Here
</code></pre>

Preview of This Syntax Highlighter :-

Conclusion :-

In this post I have shared with you all How To Add Syntax Highlighter on Blogger. So how did you like this post and tell me by commenting. If you have any question then you can comment. Thanks for visiting our website.

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How To Add Syntax Highlighter on Blogger ?:)

Conclusion

In this article, I have shared How To Add Syntax Highlighter on Blogger ?. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!