How to Make Multi tab syntax highlighter for Blogger

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