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

Benefits of This Code Box : 

How to Make Code Box Or syntax highlighter :-

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

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

About Author : Mr. Suraj Singh Joshi

नमस्कार दोस्तो, स्वागत है आपका इस वेबसाइट पर मेरा नाम है Suraj Singh Joshi और मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। मैंने यह वेबसाइट खास उनके लिए क्रिएट किया है, जो Digital Markering, Website Designing, Exam Preparations Or General Knowledge के बारे में जानना चाहते है क्योंकि यहाँ आपके लिए Blogging और Make Money, SEO, Adsense And News Updates etc जैसे Topics पर आर्टिकल मिलेंगे जो नए Updates के साथ है। मैं यहाँ पर नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤

Let's Get Connected: Twitter | Facebook | Youtube