Memasukkan Kode Syntax Highlighter

Di blog saya, saya selalu ingin memformat kode sumber seperti dalam bahasa "CSS", "HTML" ataupun "SCRIPT "dan beberapa bahasa pemrograman lainnya, tetapi tidak menemukan cara yang praktis. Hingga saya membaca beberapa tutorial tentang menambahkan penyorotan sintaksis ke blog Blogger seperti milik saya.

Jadi, saya menerapkan beberapa blok kode, editor akan menampilkan setiap baris sebagai paragraf terpisah. Hal ini meninggalkan ruang vertikal yang terlalu banyak, sehingga kode terlihat tidak rapi. Solusi sementara adalah beralih ke tampilan HTML di editor dan membungkus blok kode dengan tag <pre>...</pre>...., yang akan menyisipkan spasi baris yang benar. Namun, kode tidak menonjol di halaman dan masih ada ruang untuk meningkatkan keterbacaan dan dampak visualnya.

Beruntungnya, Blogger adalah platform yang sudah lama ada dan masih bisa diajari trik baru, seperti pengaturan yang dijelaskan dalam tutorial yang saya temukan.

Pertama: Masukkan kode dibaah ini, sebelum 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: #888;
    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: #41bf0a;
}
pre.code-html code {
    color: #f56b58;
}
pre.code-javascript code {
    color: #ffcc00;
}
pre.code-jquery code {
    color: #00a2ff;
}

Kedua: Masukkan kode script berikut, diatas/sebelum </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('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>

Lalu, simpan dengan cara mengklik UPDATE atau PERBARUI 

Langkah terakhir, sisipkan kode berikut pada setiap postingan dengan format html ketika ingin menambahkan kode css, hrml, ataupun script.

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Islamic Program
Senin, 29 September 2025

Artikel Terkait