Dear Sobat Blogger, dalam artikel kali ini akan kita bahas cara menampilkan kode HTML di Postingan Blogger. Disini template yang saya gunakan yaitu Fletro Pro, nah pada template fletro pro ini sebenarnya sudah ada Fitur Syntax Hightlighter, namun kita belum tahu cara mengaktifkanya. Untuk mengaktifkan Syntax Hightlighter temen-temen silahkan untuk mengetik artikel seperti biasa namun gunakan mode HTML. Kemudian Tulislah dengan Kode Seperti ini :
<div class="pre hl notranslate" data-text=".html">
<div id="code2">
<pre>Taruh Kode HTML di sini...</pre>Tool parse HTML dan Javascript
semestinya. Parse jika diterjemahkan dalam Bahasa Indonesia berarti menguraikan. Jelasnya seperti ini Jika kita menempelkan KODE HTML atau JavaScript maka kode tersebut aktif dan akan menrubah tampilan halaman website kita, biasanya menjadi berantakan. Untuk itulah diperlukan Tools Parse.
Bagaiaman Buat Blog yang belum mendukung syntax highlighter ? temen-temen bisa memasangnya seperti ini :
.post-body pre {
background-color: #292E34; /* warna background */
border-left: 5px solid #008c5f; /* variasi border kiri */
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
color: #BFBF90; /* warna huruf */
font-size: 12px; /* ukuran huruf */
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}Langkah terakhir silahkan untuk tekan Simpan, Nah untuk cara menuliskan Kode di postingan temen-temen tinggal menggunakan atribut yang tadi diatas. atau tinggal mulai dengan kode :
<pre><code>
Masukkan semua kode CSS, HTML atau Javascript disini
</pre></code>Oke Sobat itu saja yang bisa kita bahas saat ini, Tutorial Cara Memasang Syntax Highlighter Keren di Blogger. Semoga bermanfaat dan jangan lupa untuk share ke media sosial kamu.
