How to Make Multi tab syntax highlighter for Blogger

How to Make Multi tab syntax highlighter for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to Make Multi tab syntax highlighter for Blogger.

Benefits :-

  1. New custom look.
  2. New Easy Use.
  3. Add all your codes in one place.
Let's Start
Demo

How to Make Multi tab syntax highlighter :-

Those codes were tested on imagz theme only

Step 1 :- Go To Blogger's Dashboard.
Step 2 :- Create New Post or Page or edit one.
Step 3 :- Click the pen button and press HTML view.
Step 4 :- Copy and paste the below provided code

<div class='pre tb'>
  <!--[ Active function ]-->
  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>
  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
<pre>html here</pre>
</div>

<div class='preC-2'>
<pre>css here</pre>
</div>

<div class='preC-3'>
<pre>js here</pre>
</div>
</div>
  .pre{background:var(--synxBg);color:var(--synxC);direction:ltr}.pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)}.pre pre{margin:0;color:inherit;background:inherit}.cmC i[rel=pre]::before,.pre:not(.tb)::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px}.pre:not(.tb).html::before{content:'.html'}.pre:not(.tb).css::before{content:'.css'}.pre:not(.tb).js::before{content:'.js'}.cmC i[rel=pre],pre{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}pre i{color:var(--synxBlue);font-style:normal}pre i.block{color:#fff;background:var(--synxBlue)}pre span{color:var(--synxGreen)}pre i.comment{color:var(--synxGray)}pre i.tag{color:var(--synxOrange)}pre i.blue{color:var(--synxBlue)}code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)}.pre.tb{border-radius:5px}.pre.tb pre{margin:0;background:inherit}.pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0}.pre.tb .preH>*{padding:13px 20px}.pre.tb .preH::after{content:'</>';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto}.pre.tb>:not(.preH){display:none}.pBd input[id*="1"]:checked~div[class*=C-1],.pBd input[id*="2"]:checked~div[class*=C-2],.pBd input[id*="3"]:checked~div[class*=C-3],.pBd input[id*="4"]:checked~div[class*=C-4]{display:block}.tbHd{display:flex;border-bottom:1px solid var(--contentBo);margin-bottom:30px;font-size:14px;font-family:var(--fontB);line-height:1.6em;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tbHd>*{padding:12px 15px;border-bottom:1px solid transparent;transition:var(--trans-1);opacity:.6;white-space:nowrap;scroll-snap-align:start}.tbHd>::before{content:attr(data-text)}.tbCn>*{display:none;width:100%}.tbCn>* p:first-child{margin-top:0}.pBd input[id*="1"]:checked~.tbHd label[for*="1"],.pBd input[id*="2"]:checked~.tbHd label[for*="2"],.pBd input[id*="3"]:checked~.tbHd label[for*="3"],.pBd input[id*="4"]:checked~.tbHd label[for*="4"]{border-color:var(--linkBg);opacity:1}.pBd input[id*="1"]:checked~.tbCn div[class*=Text-1],.pBd input[id*="2"]:checked~.tbCn div[class*=Text-2],.pBd input[id*="3"]:checked~.tbCn div[class*=Text-3],.pBd input[id*="4"]:checked~.tbCn div[class*=Text-4]{display:block}.tbHd.stick{position:-webkit-sticky;position:sticky;top:var(--headerH);background:var(--bodyBg)}

Step 5 :- Replace all the blue background marked parts with your keywords.

Replace the blue background parts.

Rate this article

Frontend Developer and UX Designer

3 comments

  1. This is really Cool, Thank you Brother
    1. Thanks for your compliment bro ☺
    2. Your Comment made my day, Thanks for your review