K esempatan sebelumnya saya sudah membahas Membuat Pre Code Otomatis Menggunakan Blockquete Di Blogger, Nah Pada Kesempatan Kali Ini Saya Akan Membahas Hal Yang Sama Yaitu Membuat Pre Code Html Css Dan Js Menggunakan MultiTabs Syntax Higlight.
Jika kita membuat pre code menggunakan Blockquete maka kode yang kita tandai sebagai paragraf blockquete maka paragraf tersebut akan otomatis di bungkus dalam pre code secara otomatis. Pre code menggunakan blockquete akan bermanfaat untuk blog dengan tema pemograman seperti html,css, dan js.
Namun pre code otomatis menggunakan blockquete yang digunakan blog dengan tema selain pemograman maka akan memperjelek tampilan blog kita. Oleh sebab itulah saya membuat artikel ini untuk pemilik blog dengan tema gado-gado yang pengen memasukan paragrafnya di dalam pre code multitab syntax highlight.
Artinya Multitab Syntax Highlight (Pre Code) Yang Sering Digunakan Blogger
Mengapa Multitab Syntax Highlight Digunakan Blogger?
Contoh Tampilan HTML Sederhana MultiTab Syntax Highlight:
<div class="tabs"><button class="tab" onclick="showTab('python')">Python</button><button class="tab" onclick="showTab('javascript')">JavaScript</button></div><div id="python" class="code-block"><pre><code class="language-python">def hello_world():print("Hello, world!")</code></pre></div><div id="javascript" class="code-block" style="display: none;"><pre><code class="language-javascript">function helloWorld() {console.log("Hello, world!");}</code></pre></div><script>function showTab(tabId) {document.querySelectorAll('.code-block').forEach(el => el.style.display = 'none');document.getElementById(tabId).style.display = 'block';}</script>
Cara Membuat Multitab Syntax Highlight (Fre Code) di Blogger/Blogspot
Apa Itu Multitab Syntax Highlight?
Berikut adalah manfaatnya:
Persiapan Sebelum Membuat Multitab Syntax Highlight (Fre Kode)
Langkah 1: Struktur Dasar HTML untuk Multitab
<div class="pre tb"><!-- Input untuk tab --><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 tab --><div class="preH tbHd scrlH"><label for="preT-1" data-text="HTML">HTML</label><label for="preT-2" data-text="CSS">CSS</label><label for="preT-3" data-text="JavaScript">JavaScript</label></div><!-- Konten setiap tab --><div class="preC preC-1"><pre><code class="language-html"><h1>Hello World</h1></code></pre></div><div class="preC preC-2"><pre><code class="language-css">body { background-color: #f4f4f4; }</code></pre></div><div class="preC preC-3"><pre><code class="language-javascript">console.log('Hello World');</code></pre></div></div>
Langkah 2: Menambahkan CSS untuk Gaya Multitab
/* Sembunyikan input radio */.prei.hidden {display: none;}/* Gaya header tab */.preH label {display: inline-block;padding: 10px 20px;cursor: pointer;background: #f0f0f0;border: 1px solid #ddd;margin-right: -1px;transition: background 0.3s;}.preH label:hover {background: #e0e0e0;}/* Gaya tab aktif */.prei:checked + .preH label {background: #fff;font-weight: bold;border-bottom: 1px solid #fff;}/* Konten tab */.preC {display: none;padding: 15px;border: 1px solid #ddd;background: #fff;}#preT-1:checked ~ .preC-1,#preT-2:checked ~ .preC-2,#preT-3:checked ~ .preC-3 {display: block;}
Langkah 3: Menambahkan Syntax Highlight dengan Prism.js
<!-- Prism.js CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" /><!-- Prism.js Script --><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
Langkah 4: Implementasi Multitab syntax Highlight (Fre Code) di Blogger
Langkah 5: Pengujian Multitab Syntax Highlight Di Blogspot
Membuat Multitab Syntax Highlight Di Template Median Ui Dan Plus Ui
<div class='pre tb'> <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'> <div class='preH tbHd scrlH'> <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> <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 here
css here
JS here