Cara Membuat Syntax Highlighter Berwarna di Blog

Cara Membuat Syntax Highlighter Berwarna di Blog - Hallo, Kali ini saya ingin memberikan sebuah Tutorial yang mungkin berguna buat Blog Tu...

Cara Membuat Syntax Highlighter Berwarna di Blog - Hallo, Kali ini saya ingin memberikan sebuah Tutorial yang mungkin berguna buat Blog Tutorial Script. Sebelumnya Saya pernah memberikan Tutorial yang sama dengan Tutorial ini namun versi sebelumnya adalah versi Otomatisnya, Dalam kata lain adalah Versi Sederhananya. Untuk melihat Tutorial Syntax Highlighter yang sebelumnya Kamu bisa Cek di sini.. Tutorial Syntax Highligher.

Nah, Sekarang adalah Syntax Highlighter Versi Berwarna. Karena tampilan dari Syntax ini berbeda atau bisa dibilang cantik, Visitor pun akan merasa betah mengunjungi Blog kalian karena Syntax ini. Perlu saya sarankan, bagi kalian yang Niche blognya tidak lepas dari yang namanya "Code-codean" :'3 lebih baik kalian memasang Syntax ini. Biasanya cara memasang Syntax Highlighter di golongkan menjadi 4 yaitu :

• HTML
• CSS
• JavaScript
• JQuery

Tapi Di Syntax ini, saya hanya menyederhanakan cara penggunaannya. Alasan dari Cara penggunaannya saya mempermudah karena saya tipe orang yang engga mau Ribet itu saja mungkin kalian juga tidak mau ribet dengan mengkelompokkan Script 4 Golongan yang sudah saya Sebutkan tadi Seperti :

- HTML : Khusus untuk HTML Saja

- CSS : Khusus untuk Script CSS 

- Dll

Jadi tanpa Basa-basi kita bahas saja langkah-langkah Cara Membuat Syntax Highlighter Keren nan Berwarna ini, Dengan mengikuti langkah-langkah dari pembuatannya mungkin kalian akan paham dengan yang saya jelaskan diatas, Jadi Silahkan disimak ya.

Cara Membuat Syntax Highlighter Berwarna di Blog

1. Masuklah ke Blogger>Template>Edit Template. Sekarang, Carilah Code ]]></b:skin> Lalu Copy Code yang ada dibawah ini dan Pastekan tepat diatas Code yang dicari tadi.

/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
code .token.operator {color:#1887dd;}
code .token.atrule,code .token.attr-value {color:#009999;}
pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;}
code .token.keyword {color:#e13200;font-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:'Code';font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="ScriptKu"]:before{background-color:#fff;}

2. Setelah Itu Carilah Code </body>... Copylah Code dibawah ini dan Letakkan Tepat diatas Code yang di cari tadi.

<script src='https://cdn.rawgit.com/Izalfatur1122/ZureDesign/dd895cb4/SyntaxHighlighter-Zuredesign.js' type='text/javascript'/>
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

3. Klik Simpan Template, Silahkan di Uji Coba Terlebih Dahulu.
Untuk Mencoba Script Tersebut silahkan Masukkan Code Dibawah ini pada Bagian HTML

<pre title="Script" data-codetype ="ScriptKu"><code class="language-markup"> ... YOUR CODE HERE ... </code></pre>

Isilah bagian "YOUR CODE HERE" Dengan Script yang ingin kalian masukkan ke Syntax Highlighter pada Bagian Compose.

Sekian Tutorial dari saya, Bila ada hal yang kurang dimengerti dari Tutorial saya kali ini silahkan Corat-coret pada Kolom Komentar. Dan Jika ada Keluhan, Kritik ataupun Saran silahkan Hubungi kami melalui Contact... Sekian Terima Kasih.