Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Syntax Highlighter di Blog Dengan Scroll Navigasi dengan mudah.
Syntax Highlighter ialah sebuah text editor yang menyoroti penulisan markup kode di halaman website, selain itu Syntax Highlighter juga memiliki fungsi untuk mempermudah pengunjung dalam mengenali keseluruhan sebuah kode.
Biasanya Syntax Highlighter terdapat pada blog dengan niche tutorial seperti blog ini ( telatngoding.com ).
Syntax Highlighter hampir mirip dengan Blockquote, hanya saja pada blockquote memiliki fitur warna tulisannya yang biasa saja dan jika ingin merubah warna tulisannya harus dilakukan secara manual.
Syntax Highlighter yang akan saya bagikan ini memilki tulisan yang berwarna, sehingga bisa membuat pengunjung tidak bosan untuk melihatnya. Nah, jika kalian tertarik untuk memasang Syntax Highlighter ini pada blog kalian caranya juga sangat mudah, kalian bisa ikuti caranya di bawah ini.
Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi
- Buka Blog kalian
- Pilih Tema lalu pilih Edit HTML
- Salin kode di bawah ini dan letakan di atas kode </head>
<style type='text/css'>
/* Highlighter */
pre{max-height:250px;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>- Lanjut salin kode di bawah ini dan letakan tepat di atas 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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>- Simpan template kalian.
CSS <pre><code class="language-css">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>
JS <pre><code class="language-javascript">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>
HTML <pre><code class="language-html">
Isi disini dengan kode CSS dan Parse kode bila diperlukan
</code></pre>Pilih salah satu kode di atas sesuai dengan kebutuhan kalian.
Bagaimana sangat mudah bukan untuk Cara Terbaru Membuat Syntax Highlighter Di Blog Dengan Scroll Navigasi, untuk hasilnya kalian bisa lihat pada postingan ini.
Nah, jika kalian ada pertanyaan silahkan bertanya di kolom komentar di bawah ini, dan terimakasih sudah berkunjung semoga postingan kali ini bermanfaat buat kalian semua.