Cara Membuat Syntax Highlighter di Blog
Kamis, 09 September 2021
Tulis Komentar
Rezapedia.com - Pernahkah kalian melihat sebuah blog yang memasang syntax highlighter atau html yang keren dalam postingan blognya? Jika pernah, apakah kalian tau cara membuat syntax highlighter di blog?
Biasanya orang yang memasang syntax highlighter pada sebuah blog adalah situs yang membahas tutorial seputar blog atau mungkin blog yang membagikan kode-kode, selain itu ada juga orang yang ingin menandai suatu tulisan dengan cara memasang syntax highlighter di postingan blog agar tulisan terlihat jelas dan berbeda dengan tulisan yang lainnya.
Baca juga: Cara Membuat Sitemap Blog yang Responsive
Syntax Highlighter sendiri merupakan sebuah script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasanya terdapat pada sebuah situs yang berisi konten-konten tutorial atau berbagi tips seputar blog yang di dalamnya terdapat sebuah script HTML, CSS, JavaScript, dan lain sebagainya.
Memasang syntax highlighter dalam postingan blog sangat berguna untuk mempercantik tampilan agar kode atau tutorial yang kita bagikan dapat terlihat dengan jelas sekaligus merapihkan kode-kode supaya tidak berantakan.
Cara Membuat Syntax Highlighter di Blog
Kelebihan dalam memasang syntax highlighter ini yaitu pengunjung akan merasa lebih nyaman ketika membaca isi konten-konten yang terdapat pada blog kita, dan bagi pemilik blog akan membuatnya terasa lebih professional dalam menyajikan konten-konten pada blog tutorial yang mereka miliki.
Baca juga: Cara Memasang Script Lazy YouTube di Blog
Dalam artikel ini, mimin rezapedia akan memberikan sebuah tutoria cara membuat syntax highlighter di blog untuk kalian yang masih bingung untuk cara membuatnya. berikut di bawah ini tutorial cara membuat syntax highlighter sekaligus cara pasang syntax highlighter ke dalam postingan blog.
Cara Memasang Syntax Highlighter ke Template Blog
1. Pertama-tama masuk ke Blogger > Tema > Edit HTML.
2. Kemudian tambahkan kode CSS di bawah ini sebelum </head>.
<style type='text/css'>
/* Syntax 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>3. Selanjutnya tambahkan kode di bawah ini sebelum </body>.
<script type='text/javascript'>
//<![CDATA[
// Syntax 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>4. Setelah itu klik Simpan tema.
Nah, karena kalian sudah berhasil membuat syntax highlighter ke dalam template blog, sekarang tinggal bagian cara memasangnya ke dalam postingan, berikut cara-caranya seperti tutorial di bawah ini.
Cara Memasang Syntax Highlighter ke Postingan Blog
1. Buatlah postingan baru dengan judul apa saja
2. Lalu untuk penulisannya adalah dengan cara menambahkan kode berikut ini di tab HTML.
<pre><code>Masukkan_Kode_CSS/HTML/JavaScript_Disini</code></pre>3. Selesai.
Bagaimana? mudah sekali bukan tutorial cara membuat syntax highlighter di blog ini? sekarang kalian tidak perlu bingung lagi untuk memakai syntax highlighter ke dalam konten-konten seputar tutorial blog yang kalian buat.
Terima kasih telah membaca artikel Cara Membuat Syntax Highlighter di Blog, semoga artikel yang mimin bagikan ini dapat bermanfaat untuk kalian semua. Jika ada pertanyaan terkait artikel ini, silahkan komen di bawah ya.
Jangan lupa untuk cek artikel menarik lainnya hanya di rezapedia.com!
Belum ada Komentar untuk "Cara Membuat Syntax Highlighter di Blog"
Posting Komentar