Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat syntax highlighter di template linkmagz.
Template linkmagz adalah salah satu template favorit saya, selain memiliki kecepatan yang 100% linkmagz juga memiliki data struktur yang rapih dan terintegrasi. Dari versi ke versinya linkmagz terus berkembang hingga sekarang yang memiliki tampilan benar - benar seperti wordpress.
Template linkmagz sangat cocok untuk semua niche bahkan untuk jualan sekalipun karena linkmagz sudah menyediakan fitur - fitur premiumnya, tapi jika kalian menggunakan niche tutorial seperti tutorial blogger maupun website yang sering membikin artikel tentang membagikan kode maka akan sedikit kesuiltan pada penempatan kode yang akan di bagikan.
Bawaan template linkmagz ini sebenarnya sudah memiliki kode untuk menempatkan kode di dalam artikel namun menurut saya kurang cocok karena menggunakan background warna pink, nah disini saya akan merubah warna tersebut dan sedikit memodifikasi sehingga nantinya yang tampil lebih berwarna alias warna warni.
Untuk tampilannya seperti gambar di bawah ini:
Untuk membuat seperti gambar di atas kalian hanya perlu menambahkan CSS dan JS kedalam template blog kalian. Lantas bagaimana caranya membuat syntax highlighter seperti itu? simak caranya di bawah ini.
Cara Membuat Syntax Highlighter di Template LinkMagz
- Silahkan kalian masuk ke blog kalian lalu pilih tema dan pilih edit html
- Salin kode di bawah ini dan letakan di atas kode </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>- Selanjutnya salin kode di bawah ini dan letakan di atas 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.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 tema klian dan selesai.
Cara Menampilkan Syntax Highlighter di Dalam Postingan Blog
- Masuk ke artikel kalian
- Pilih mode Tampilan HTML
- Salin kode di bawah ini dan letakan dimana yang kalian inginkan asalkan masih dalam artikel kalian dalam mode tampilan html
<pre><code> Kode di Sini </code></pre>Untuk tilisan yang saya tandai dengan warna kuning kode di disini silahkan ganti dengan kode yang ingin kalian bagikan.
- Publish artikel kalian dan selesai.
Seperti itulah tutorial singkat tentang Cara Membuat Syntax Highlighter di Template LinkMagz semoga bermanfaat dan terimakasih.