Cara Membuat Kode Box Syntax Highlighter pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Kode Box Syntax Highlighter pada Blog

Pilihan Editor :

Cara Membuat Kode Box Syntax Highlighter pada Blog
Penulis Bagus Surochman
0
Modus malam




KURAZONE ~ Halo sahabat Kurazer, pada kesempatan yang lalu kita sudah belajar mengenai Cara Membuat Kode Box + Line Number pada Blog yang digunakan pada blog Kurazone ini, kali ini kita akan belajar membuat kode box nya menjadi syntax highlighter alias memiliki efek teks bewarna warni secara otomatis. (Yeah, bisa dibilang ini adalah kombinasi dari pembahasan kode box kemarin)


Cara Membuat Kode Box Syntax Highlighter pada Blog.

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode </style> atau ]]></b:skin>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}

3. Copy kode JavaScript dibawah ini, lalu letakkan (paste) diatas kode </body>
<script type="text/javascript">
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>
")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Simpan Template

Cara Menggunakan Syntax Highlighter

Gunakan kode :
<pre><code>Kode kode disini</code></pre>

Secara otomatis, kode yang berada diantara kode <pre><code> dan </code></pre> akan memiliki efek warna warni.

Itulah informasi mengenai "Cara Membuat Kode Box Syntax Highlighter pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!

Courtesy by : Arlina dzgn
nanio
Cara Membuat Kode Box Syntax Highlighter pada Blog
Cara Membuat Kode Box Syntax Highlighter pada Blog Cara Membuat Kode Box Syntax Highlighter pada Blog Reviewed by Bagus Surochman on 10/06/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.