Cara Memasang Syntax Highlighter Pada Postingan Blog

Cara Memasang Syntax Highlighter Pada Postingan Blog -

Syntax Highlighter yaitu fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam banyak sekali warna, dan font sesuai istilah kategori. Fitur ini sangat mempermudah penggunanya dalam menulis struktur arahan menyerupai bahasa pemograman menyerupai CSS,JavaScript,HTML.

Dengan adanya fitur ini pengunjung blog akan lebih nyaman sob membaca isi konten blog, dan untuk pembuat dapat lebih profesional untuk menciptakan konten.

Syntax Highlighter untuk dibandingkan dengan Blockquote, Sytax Highlighter ini lebih efektif dalam proses pembuatan, pemindahan dibandingkan Blockquote. Cara kerjanya hampir sama..

Oke teman TrikS kali ini aku akan memperlihatkan tutorial Cara Memasang Syntax Highlighter Pada Postingan Blog.

Cara Memasang Syntax Highlighter Dalam Tema Blogger

Pertama-tama, teman login terlebih dahulu ke blogger.com masuk ke TEMA > Edit HTML tambahkan arahan CSS dibawah ini sebelum kode

</head> atau </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 arahan berikut ini sebelum kode

</body> atau </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 arahan diatas dalam tema, kini terapkan pada postingan sobat, buat postingan gres lalu untuk penulisannya teman dapat masuk ke sajian HTML(bukan Compose)

<pre><code>Tulis Kode Sobat Disini</pre></code>

Silahkan teman ganti yang tercetak warna biru dengan arahan HTML,CSS dan JavaScript sobat, khusus untuk arahan HTML dan JavaScript silahkan parse terlebih dahulu Klik

DISINI

untuk parse.

Untuk misalnya dapat lihat pada postingan ini.

Oke sekian yang dapat aku jelaskan tentang Cara Memasang Syntax Highlighter Pada Postingan Blog Terima Kasih yang sudah berkunjung biar bermanfaat bagi kalian semua.

Sumber: Arlinadzgn

Sumber https://www.triksimple.com/