Cara Membuat Syntax Highlighter Berwarna di Blog

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" :' lebih baik kalian memasang Syntax ini. Biasanya cara memasang Syntax Highlighter di golongkan menjadi 4 yaitu :

1. HTML
2. CSS
3. Javascript
4. 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
• JavaScript: Khusus untuk Script JavaScript
• JQuery: Khusus untuk Script JQuery
• Dll

Cara Membuat Syntax Highlighter Keren dan Berwarna 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 di bawah ini dan paste tepat di atas kode ]]></b:skin>

 /* 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> Lalu anda copy kode di bawah ini dan letakkan di atas kode </body>

 <script src='https://cdn.rawgit.com/akiramitsu/iskyblog/da1aa2d2/SyntaxHighlighter.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> 

Note: Anda juga bisa mengganti title nya misalkan kode tersebut adalah CSS silahkan ganti <pre title="HTML" menjadi CSS, JavaScript, PHP dll
Jangan lupa juga untuk memparse kode.

Terima kasih sudah berkunjung ke IskyBlog jika ada yang ingin ditanyakan silahkan hubungi kami di bagian page kontak atau comment di bawah ini

Share :