How to Make Multi tab syntax highlighter for Blogger || How To Add Stylish Code box coding For blogger Or Website || Full Details

How to Make Multi tab syntax highlighter for Blogger || How To Add Stylish Code box coding For blogger Or Website || Full Details

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

Benefits of This Code Box : 

• New custom look.
• New Easy Use.
• Add all your codes in one place.

How to Make Code Box Or syntax highlighter :-

Follow This Steps, step by Step for adding code box on your website or blog : 

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. 

1.html coding  :  html Coding is given to bellow : 

<!-- coding start here --> 

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

<!-- html Coding end here --> 

2. CSS Codings : 

<!-- Css Coding Start here --> 

.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)}

<!-- Css Coding End here -->

Step 5 :- 

Replace all the blue background marked parts with your keywords.