Meskipun di blog ini Saya memakai syntax highlighter dari Software Maniacs, tapi kalau diminta untuk menentukan dari segi kecepatannya, maka Saya akan memakai PRISM, sebuah syntax highlighter untuk HTML, CSS, Java dan JavaScript (bekerja juga untuk PHP dengan perkiraan sebagai markup):
Proses instalasi hanya membutuhkan dua langkah. Pertama-tama masuklah ke halaman editor HTML Template Anda lalu pilih Edit HTML dan klik Lanjutkan. Temukan arahan ini:
]]></b:skin>
Salin arahan CSS ini dan letakkan di atasnya:
/* Tema langsung => RDark Saya buat menurut tema-tema SyntaxHighligter dari Alex Gorbatchev URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html*/ pre { padding:.5em 1em; margin:.5em 0; white-space:pre; word-wrap:normal; overflow:auto; background-color:#1B2426; } code { font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace; line-height:16px; color:#B43D3D; background-color:#eee; border:1px solid #ddd; padding:1px 2px; } pre code { display:block; background:none; border:none; color:#B9BDB6; direction:ltr; text-align:left; word-spacing:normal; padding:0 0; } code .token.punctuation { color:#83405A; } pre code .token.punctuation { color:#B9BDB6; } code .token.comment, code .token.prolog, code .token.doctype, code .token.cdata { color:#435A4D; } code .namespace { opacity:.8; } code .token.property, code .token.tag, code .token.boolean, code .token.number { color:#5BA1CF; } code .token.selector, code .token.attr-name, code .token.string { color:#986A7C; } pre code .token.selector, pre code .token.attr-name, pre code .token.string { color:#E0E8FF; } code .token.entity, code .token.url, pre .language-css .token.string, pre .style .token.string { color:#E0E8FF; } code .token.operator { color:#878A85; } code .token.atrule, code .token.attr-value { color:#48D30F; } pre code .token.atrule, pre code .token.attr-value { color:#48E638; } code .token.keyword { color:#47A1CF; font-style:italic; } code .token.comment { font-style:italic; } code .token.regex { color:#B43D3D; } code .token.important { font-weight:bold; } code .token.entity { cursor:help; }Setelah itu temukan arahan ini:
</body>
Letakkan skrip ini di atasnya:
<script "//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/prism.min.js"></script>Klik Simpan Template.
Cara Pemakaian
Setiap tipe bahasa mempunyai kelasnya masing-masing:
- HTML, XML, PHP ⇒
language-markup - CSS ⇒
language-css - JavaScript ⇒
language-javascript - Java ⇒
language-java
Kode yang ingin diberi efek harus berada di dalam tag pre > code menyerupai ini:
<pre><code class="language-markup"> ... arahan HTML (yang sudah di`escape`) di sini ... </code></pre> <pre><code class="language-css"> ... arahan CSS di sini ... </code></pre> <pre><code class="language-javascript"> ... arahan JavaScript di sini ... </code></pre> <pre><code class="language-java"> ... arahan Java di sini ... </code></pre>Tema-tema yang orisinil dapat Anda temukan di situs sumbernya, PRISM. Atau mungkin Anda mau membuatnya sendiri?
Sumber https://www.dte.web.id/