Cara Menciptakan Prims Syntax Highlighter Berwarna Di Blog

Cara Membuat Prims Syntax Highlighter Berwarna di Blog - Salam sahabat blogger, Bagi sobat yang sering membagikan postingan ihwal tutorial yang berkaitan dengan blogger, tentu sobat tidak abstrak dengan Prism Syntax Highlighter atau bias kita sederhanakan dengan nama kotak script. Pada kesempatan ini admin akan membagikan tutorial memasang kotak script dengan praktis untuk di terapkan bagi seorang pemula dalam dunia blogging. Dengan membuatkan tips ini, saya berharap untuk mampu menawarkan bantuan dalam memperindah tampilan blog atau website sahabat bloger serta mampu memotivasi para sahabat biar semakin semangat dalam dunia bloging.

Pada postingan ini, admin yang hanya seorang newbie tidak membuat sendiri skript-script pada tutorial berikut, melainkan script-script dibawah ini bersumber dari situs Arlina design.

Syntax Highlighter atau kotak script - berfungsi sebagai media penandaan biar memiliki pembeda dari teks umum lainnya yang ada dalam sebuah halaman blog atau website. Misalnya difungsikan untuk menandai JavaScript, CSS, dan sebagainya biar berbeda dari tabrakan pena pada halaman postingan sahabat blogger. Syntax Highlighter atau kotak script yang saya bagikan, sama persis dengan yang saya gunakan pada blog ini. jadi sahabat blogger mampu melihat jadinya langsung pada postingan saya di cuilan bawah.

Sebelumnya perlu sahabat blogger ketahui bahwa, tidak semua template yang ada suport dengan Syntax ini, kalau sobat menggunakan Template responsive atau tempalate yang dirilis Arlina Design maka dipastikan kotak script ini bekerja dengan baik menyerupai yang sudah saya coba pada template New Minima Colored dan N Light Pro dari Arlina design.

Membahas mengenai keunggulan Syntax Highlighter atau kotak script ini, tentu akan berkontribusi penuh pada tampilan blog atau website sobat, sobat mampu buktikan sendiri dengan mencobanya. Dari segi design, kotak script ini sangat simpel dan tentunya mengutamakan design kerapian, dan dipadukan dengan warna-warna yang majemuk menambah kesan indah pada tampilannya. Dengan kekontrasan warna pada setiap jenis kata dari text secript yang ditampilkan, akan membuat pengunjung blog sobat menjadi semakin betah dan menyukai blog sobat.

Bagaimana sobat? berminat dan tertarik memasang Syntax Highlighter atau kotak script ini pada blog sobat? Ayo langsung saja kita praktekan sobat.

Panduan Membuat Prims Syntax Highlighter Berwarna di Blog

1. Buka Dashboard blog sobat dan buka: Tema >> edit HTML >> kemudian sobat salin Script CSS berikut dan terapkan tepat sebelum </style>

/* CSS Highlighter */ .hljs{display:block;overflow-x:auto;padding:0.5em;background:#2c3641;color:#fff;line-height:1.5;font-size:13px} .hljs-name,.hljs-strong{font-weight:normal} .hljs-code,.hljs-emphasis{font-style:italic} .hljs-tag{color:#62c8f3} .hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc} .hljs-string,.hljs-bullet{color:#a2fca2} .hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa} .hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363} .hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c} .hljs-comment,.hljs-deletion,.hljs-code{color:#888} .hljs-regexp,.hljs-link{color:#c6b4f0} .hljs-meta{color:#fc9b9b} .hljs-deletion{background-color:#fc9b9b;color:#333} .hljs-addition{background-color:#a2fca2;color:#333} .hljs a{color:inherit} .hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline} mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#e67e22;color:#fff;} .BLOG_mobile_video_class{display:none!important;} .post-body a.img,.post-body .separator a {margin-left:0!important;margin-right:0!important;}

2. Selanjutnya sobat Salin Kode dibawah ini dan terapkan tepat diatas isyarat </body>

<script type='text/javascript'> //<![CDATA[ // Google Url dan Syntax Highlighting function downloadJSAtOnload(){!function(n){for(var o=0,d=n.length;d>o;++o){var t=document.createElement("script");t.src=n[o],document.body.appendChild(t)}}(["https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/googleshorturl.js","https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js"])}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>

3. Simpan template sobat.

Untuk memanggil Syntax Highlighter berfungsi pada pstingan sahabat blogger, silakan salin Kode berikut dan terapkan pada HTML postingan sobat.

<pre title="Cara Membuat Prims Syntax Highlighter Berwarna di Blog" data-codetype ="HTMLku"><code class="language-HTML">kode HTML (yang sudah di`Parse/escape`) di sini</code></pre> <pre title="Cara Membuat Prims Syntax Highlighter Berwarna di Blog" data-codetype ="CSSku"><code class="language-css">kode CSS di sini</code></pre> <pre title="Cara Membuat Prims Syntax Highlighter Berwarna di Blog" data-codetype ="JavaScriptku"><code class="language-javascript">kode JavaScript (yang sudah di`Parse/escape`) di sini</code></pre> <pre title="Cara Membuat Prims Syntax Highlighter Berwarna di Blog" data-codetype ="JQueryku"><code class="language-javascript"> isyarat jQuery (yang sudah di`Parse/escape`)</code></pre>

Jika sobat ingin memasang isyarat HTML, JavaScript, dan JQuery, sobat harus mem-Parse atau menconvert isyarat tersebut kedalam escape karakter terlebih dahulu. Jika sobat belum tahu caranya sobat mampu baca artikel berikut.

Baca Juga : Cara Parse HTML Dengan Mudah

4.  Panduan memasang kotak script selesai, sekarang sobat mampu lihat hasilnya.

Bagaimana sobat, praktis bukan? Jika ada yang tidak dimengerti pada panduan diatas dan ingin bertanya, sobat mampu tulis komentar pada kolom koment dibawah.
Terimakasih telah berkunjung sahabat blogger.

Source: Arlina Design
Special Thanks to Arlina Fitriani

Share this post