How to add Syntax Highlighter for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Syntax highlighter for Blogger

Benefits :-

Share your codes with the world.
You can highlight your codes too.

Let's Start

Syntax Highlighter Demo

How to add Syntax highlighter for Blogger :-

Step 1 :- Go to Blogger's dashboard and click theme.

Step 2 :- Click the arrow down icon next to the 'customize' button.

Step 3 :- Click Edit Html.

Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.

Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

/* Syntax Highlighter */ pre{color:#2f3337;position:relative;font-family:'Fira Mono', monospace;line-height:1.6em;font-size:.8rem; direction:ltr} pre:before, .commentContent i[rel="pre"]:before{content:'</>';position:absolute;right:0;top:0;color:#656e77;font-size:10px;padding:0 10px;z-index:1;line-height:35px} pre.html:before{content:'.html'} pre.css:before{content:'.css'} pre.js:before{content:'.js'} pre.link:before{content:'link'} pre:hover:before{content:'Double click to Copy'} code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:#2f3337;background:#f2f3f5;font-family:'Fira Mono', monospace} pre code, .commentContent i[rel="pre"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:#f6f6f6;color:#2f3337; padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:'Fira Mono', monospace;line-height:1.6em; text-align:left} pre span{color:#54790d} pre span.block{color:#fff;background:#015692} pre i{color:#015692;font-style:normal} pre i{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} pre i.comment, article pre i.tag, article pre i.blue{color:#656e77;user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-webkit-touch-callout:text} article pre i.tag{color:#b75501} article pre i.blue{color:#015692} .code{display:inline;padding:2px 4px;font-size:85%;line-height:inherit;color:#2f3337;background-color:rgba(0,0,0,.05);font-family:'Fira Mono', monospace} .drK code, .drK .commentContent i[rel="pre"]{background-color:rgba(0,0,0,.09);color:#989b9f} .drK .code{color:#989b9f;background-color:#2d2d30} .pre.tb pre:before{display:none} .pre.tb pre code{margin-top:-0px} pre.copied:before{content:'Copied to Clipboard!';display:felx;justify-content:center;left:0;right:0;top:110px;padding-top:15px;font-size:90%; font-family:'Noto Sans', sans-serif; display:block;width:240px;height:50px;margin:0 auto 20px; border-radius:3px; background-color:rgba(0,0,0,.8);color:#fefefe; line-height:20px;text-align:center; -webkit-transition:all .0.2s ease;transition:all .0.2s ease}

Step 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages

For Html Codes

<pre class="html"><code>html here</code></pre>

For CSS Codes

<pre class="css"><code>css here</code></pre>

For JS Codes

<pre class="js"><code>js here</code></pre>

For Duplicate types of Codes

<pre><code>codes here</code></pre>

Step 7 :- Copy the provided below code and paste it just before </body>.

<!--[ Double click to Copy ]-->
<script>/*<![CDATA[*/ for(var preclick=document.getElementsByTagName('pre'),i=0;i<preclick.length;i++)preclick[i].addEventListener('dblclick',function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t),document.execCommand('copy'),this.classList.add('copied'),setTimeout(()=>{window.getSelection().removeAllRanges(),this.classList.remove('copied')},4e3)},!1); /*]]>*/</script>

Wolv Themes

Search this blog