Cara Membuat Syntax Highlighter Di Blog Dengan Mudah

Pada kesempatan kali ini, saya akan memberikan tutorial kepada kalian semua tentang Cara Membuat Syntax Highlighter di blog. Cara ini saya tujukan kepada kalian yang memiliki blog dengan pembahasan seputar coding atau script lainnya agar terlihat rapih saat di terbitkan.

Untuk langkah langkah dalam pembuatannya, kalian bisa langsung saja ikuti tutorial membuat syntax highlighter di blog berikut ini :

Cara Membuat Syntax Highlighter Di Blog

Ada beberapa cara yang harus kalian lakukan agar tampilan code / script yang kalian upload di Blog terlihat rapih dan keren. Diantaranya adalah sebagai berikut :

• Langkah pertama, silahkan kalian masuk ke Blogger lalu pilih menu Template > Edit Html
• Jika sudah, kalian bisa tambahkan kode di bawah ini di atas kode ]]></b:skin> atau kode  </style>  

.hljs { display: block; overflow-x: auto; color: #eaeaea; background: #000; padding: 0.5; } .hljs-subst { color: #eaeaea; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .hljs-builtin-name, .hljs-type { color: #eaeaea; } .hljs-params { color: #da0000; } .hljs-literal, .hljs-number, .hljs-name { color: #ff0000; font-weight: bolder; } .hljs-comment { color: #969896; } .hljs-selector-id, .hljs-quote { color: #00ffff; } .hljs-template-variable, .hljs-variable, .hljs-title { color: #00ffff; font-weight: bold; } .hljs-selector-class, .hljs-keyword, .hljs-symbol { color: #fff000; } .hljs-string, .hljs-bullet { color: #00ff00; } .hljs-tag, .hljs-section { color: #000fff; } .hljs-selector-tag { color: #000fff; font-weight: bold; } .hljs-attribute, .hljs-built_in, .hljs-regexp, .hljs-link { color: #ff00ff; } .hljs-meta { color: #fff; font-weight: bolder; }

• Jika sudah, kalian bisa tambahkan kembali kode di bawah ini dan di letakkan di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script> //<![CDATA[ function downloadJSAtOnloadundefined){var e=document.createElementundefined"script");e.src="https://cdn.rawgit.com/dedi96/keneono/a8bd8025/highlighter.js",document.body.appendChildundefinede)}window.addEventListener?window.addEventListenerundefined"load",downloadJSAtOnload,!1):window.attachEvent?window.attachEventundefined"onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> </b:if>

• Jika sudah, kalian bisa Save Template

Untuk cara penggunannya adalah sebagai berikut : 

<pre><code> MASUKAN KODE DI SINI </pre></code>

Untuk penggunaan kode di atas, kalian harus menggunakan mode HTML bukan Compose ya..

NB : Sebelum memasukan kode kedalam mode HTML, usahakan kode yang akan kalian masukan di PARSE terlebih dahulu.. Klik Disni untuk PARSE HTML

Demikianlah artikel yang saya sampaikan tentang cara membuat syntax highlighter di blog dengan mudah, semoga artikel ini bermanfaat untuk kita semua.. Dan jangan lupa share kepada teman teman kalian dan jangan lupa tinggalkan komentar di blog ini 😘😘😘

Pengen Backlink Murah Dan Berkualitas?

Klik Gambar Di Bawah Ini !

Baca Juga