Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Table of Content

How to create Multi- Tab syntax highlighter on your Blogger

How to create Multi- Tab syntax highlighter on your Blogger

Introduction 

Hello friends welcome to Ziver shop tutorial Today we are going to watch a tutorial on how to create a Multi syntax highlighter box for our website.  This will create a unique look for your website.  I hope this post was helpful to you guys and don't forget to leave a comment about this post in the comments box below.

This Multiple Tab syntax highlighter box will only work on these three templates Median Ui, Fletro pro, Imagz.

Syntax highlighter Box Benefits 

  1. This Syntax highlighter tutorial will be very helpful for this block. 
  2. This will give Professional Looks to your website.
  3. Using this code box you can put together three codes like HTML, CSS, JAVASCRIPT.

How to Add Multi Tab syntax highlighter 


  1. First, open your Blogger account and sign in.
  2. Next, paste the code above the CSS code </head> tag given below.
<style>
/* Syntax */ .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} .pre:not(.tb)::before, .cmC i[rel=pre]::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'} pre, .cmC i[rel=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 i.green{color:var(--synxGreen)} pre i.gray{color:var(--synxGray)} pre i.red{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)} /* Multi syntax */ .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}
</style>

After adding this code, do not forget to click on the Theme Save Changes option and save.


  1. Next, copy and paste the Html code below into your posts.
  2. <div class="pre tb">
      <!--[ Active function ]-->
      <input checked="" class="prei hidden" id="preT-1" name="preTab" type="radio" />
      <input class="prei hidden" id="preT-2" name="preTab" type="radio" />
      <input class="prei hidden" id="preT-3" name="preTab" type="radio" />
      <!--[ Header/title ]-->
      <div class="preH tbHd scrlH">
        <!--[ Change atribute data-text='...' to replace title ]-->
        <label data-text="HTML"></label>
        <label data-text="CSS"></label>
        <label 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>

Conclusion 

I hope you understand How to create Multi- Tab syntax highlighter on your Blogger through this post.  If you have any doubts after reading this post please let us know your top comments in the comment box.
Student / Blogger / Content Writer

Post a Comment