Cara Memasang Syntax Highlighter Pada Postingan Blog
Syntax Highlighter ialah 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 aba-aba 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 aba-aba 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 aba-aba berikut ini sebelum kode
</head> atau </head><!--<head/>--><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 aba-aba 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 aba-aba HTML,CSS dan JavaScript sobat, khusus untuk aba-aba 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 agar bermanfaat bagi kalian semua.