Cara Memasang Syntax Highlighter Pada Postingan Blog
Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, dan font sesuai istilah kategori. Fitur ini sangat mempermudah penggunanya dalam menulis struktur kode seperti bahasa pemograman seperti CSS,JavaScript,HTML.
Dengan adanya fitur ini pengunjung blog akan lebih nyaman sob membaca isi konten blog, dan untuk pembuat bisa lebih profesional untuk membuat konten.
Syntax Highlighter untuk dibandingkan dengan Blockquote, Sytax Highlighter ini lebih efektif dalam proses pembuatan, pemindahan dibandingkan Blockquote. Cara kerjanya hampir sama..
Oke sobat TrikS kali ini saya akan memberikan tutorial Cara Memasang Syntax Highlighter Pada Postingan Blog.
Cara Memasang Syntax Highlighter Dalam Tema Blogger
Pertama-tama, sobat login terlebih dahulu ke blogger.com masuk ke TEMA > Edit HTML tambahkan kode CSS dibawah ini sebelum kode
</head> atau </head><!--<head/>--><style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.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}
</style>
Kemudian tambahkan kode berikut ini sebelum kode
</body> atau </body><!--<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>Kalau sudah Klik Simpan pada tema.
Cara Memasang Syntax Highlighter pada postingan
Setelah sudah nerapkan kode diatas dalam tema, sekarang terapkan pada postingan sobat, buat postingan baru kemudian untuk penulisannya sobat bisa masuk ke menu HTML(bukan Compose)
<pre><code>Tulis Kode Sobat Disini</pre></code>
Silahkan sobat ganti yang tercetak warna biru dengan kode HTML,CSS dan JavaScript sobat, khusus untuk kode HTML dan JavaScript silahkan parse terlebih dahulu Klik
DISINI
untuk parse.
Untuk contohnya bisa lihat pada postingan ini.
Oke sekian yang bisa saya jelaskan tentang Cara Memasang Syntax Highlighter Pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
Sumber: Arlinadzgn