Cara Membuat Syntax Highlighter dengan Text Warna

Baca Juga

Cara Membuat Syntax Highlighter dengan Text Warna – Bagi sobat yang memiliki blog yang bertemakan Tips Blogger yang membagi banyak Script tentu sangat perlu yang namanya Kotak Script. Jadi Kotak Script ini berfungsi untuk menampung kode-kode HTML, CSS, Javascript, Jquory yang nantinya akan sobat bagikan di sebuah artikel sehingga terlihat rapi dan menarik. Biasanya blogger pemula akan meletakkan kode-kode yang di baginya di artikel dengan langsung menulisnya, hal ini adalah tindakan yang salah. Dengan menulis langsung ke dalam artikel kode-kode tersebut akan berantakan dan tidak bisa di gunakan lagi.

Maka dari itu sangat penting bagi sobat untuk menggunakan Kotak Script atau biasa orang sebut dengan cara membuat Pre Code untuk berbagi seputar Tips blogger atau pembuatan Blog yang menarik. Adapun contoh Kotak Script atau Pre code ini seperti pada gamabr di atas dan di bawah ini.

Demo : http://codepen.io/tejasukmana/full/YyxvyV/

Contoh gambar di atas adalah kode HTML yang sudah di Parse dan di beri Kotak Script atau contoh sederhana dari penerapan kode tag Pre. Hasilnya akan terlihat rapi dan menarik untuk di lihat. Berbeda dengan kode Kotak Script atau kode Pre yang sudah saya pernah bahas di blog ini, kali ini saya membuat Kotak Script atau kode Pre yang lebih berwarna. Yaitu dengan menambahkan Script Warna sehingga text yang di dalam Syntax akan berubah warna otomatis sesuai dengan jenis Kodenya. Setiap 4 kode identitas tersebut akan memiliki tanda warna yang berbeda-beda di atasnya. Ok langusng saja kita cari tahu penerapannya berikut ini.

1. Buka Blogger > Pergi kemenu Template > Edit HTML > simpan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

2. Setelah itu Simpan kode di bawah ini tepat sebelum kode </body>

 
<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

3. Simpan Template.

Langkah selanjutnya adalah cara penerapan kode Kotak Script, silahkan tambahkan kode di bawah ini pada Teb HTML pada saat sobat menulis artikel.

<pre class='code code-html'><label>HTML</label><code>
Letakan HTMLnya Di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Letakan CSSnya Di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Letakan Javascriptnya Di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Letakan Jquerynya Di Sini
</code></pre>

Demikianlah tutorial mengenai Cara Membuat Syntax Highlighter dengan Text Warna, yang harus di ketahui. dengan begini script yang sobat bagikan di blog sobat akan terlihat rapi, bisa di salin dan membuat tampilan yang sangat menarik. Jika sobat ada masalah atau sudah berhasil melakukan cara tersebut silahkan tinggalkan jejak dengan berkomentar di bawah ini, semoga dapat memberikan ilmu yang bermanfaat.