Membuat Kotak Background Script Html Javascript CSS Syntax

Cara memasang script berwarna warni dengan javasript satu dengan yang lain seperti CSS dengan baground yang beraneka ragam, dengan cara Syntax Highlighting Highlight.js, pada zaman dulu umumnya memakai syntax agak susah dan sulit menghindari render blocking js dan tidak bisa keluar dari Highlight.js, nah disini kita bisa memasang syntax sederhana cepat loading dan mudah sekali menggunakanya, jika anda termasuk blog tutorial syntax maka silahkan baca dan praktekan pada blog anda yang memakai postingan html seperti css dan javasript yang lain.

Highlight.js adalah solusi jitu menggunakan syntax kode kode html pada postingan blog, pasalnya karena loading blog terasa lebih ringan dibandingkan dengan memasang syntax biasa, Highlight.js sangat lengkap dan di dukung 152 bahasa pemrograman lengkap dengan style masing masing sebanyak 72 pilihan yang bisa kita pilih untuk warnanya.

CARA PENGGUNAAN

Jika anda sudah memasangnya anda hanya akan mengedit pada postingan artikel edit HTML dan bukan pada bagian compose yaitu dengan <pre><code>kode kode disini.</code></pre>, sebelum itu silahkan simak cara memasangnya pada template blog dan dengan kode CSS.

Langkah 1 Yang Harus di Lakukan

Silahkan anda memilih beberapa style atau gaya warna dari syntax yang akan anda gunakan disini, pada highlight.js demo tersebut silahkan cari menu STYLE di bagian bawah kiri dan klik satu persatu pilihan warnanya, setelah anda sudah cocok dan menemukan 1 style warna yang anda suka segera anda kesini untuk mengcopy css yang akan anda pasang pada template anda, biasanya berada dibawah </style> atau ]]></b:skin>.

Langkah 2 Yang Harus di Lakukan

Setelah anda sudah benar melakukan langkah 1 silahkan anda copy javasript ini.

<b:if cond="data:blog.pageType == &quot;item&quot;">

<script>

//<![CDATA[

function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>



</b:if>

Jangan lupa untuk menaruhnya diatas kode </body> yang biasanya berada pada paling bawah template, dan tag <i rel="pre"> akan terbaca otomatis pada komentar blogger untuk menampilkan Highlight.js seperti pada postingan saat berkomentar di blog anda.