Cara Membuat Syntax Highlighter Pre Code di Postingan Blogger

Kali ini saya akan berbagi tutorial bagaimana caranya membuat, memasang, dan menampilkan Syntax Highlighter di postingan Blogger / Blogspot.

Bahasa lain dari Syntax Highlighter ialah Prism Syntax Highlighter, Pre Code Parser atau Pre Code Selection. Ya, apapun istilahnya, fungsinya tetap sama yaitu membedakan mana koding dan isi artikel.

Dengan adanya perbedaan antara koding dan isi artikel biasa (teks), membuat mata pembaca menjadi nyaman, - alias tidak sakit mata.

Cara Membuat Syntax Highlighter Pre Code di Postingan Blogger

Oh iya, sebelumnya saya pernah berbagi tutorial yang sama. Jika mau, cek artikelnya di sini: Cara Membuat Prism Syntax Highlighter di Postingan Blog dan Cara Menambahkan Pre Code Parser di Artikel Blog.

Simpan kode di bawah ini, di atas kode ]]></b:skin> atau </style>

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;
}

Selanjutnya simpan kode di bawah ini, di atas 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>

Cara menggunakan dan menampilkan Syntax Highlighter di postingan blog, sama seperti artikel-artikel sebelumnya.

<pre class='code code-html'><label>HTML</label><code>
Letakkan Koding HTML di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Letakkan Koding CSS di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Letakkan Koding JavaScript (Js) di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Letakkan Koding jQuery di Sini
</code></pre>

Ingat! Penggunaan koding HTML dari Syntax Highlighter di atas, digunakan pada mode tulis HTML, - bukan pada Compose.

Perhatikan! Di sini ada 4 jenis Syntax Highlighter. Kalian bisa menyesuaikan dan memilih sendiri Syntax Highlighter yang ingin digunakan.

Sumber: https://mastamvan.blogspot.com/2015/10/memasang-syntax-highlighter-pre-code-di.html