Syntax Highlighter atau yang bisa di bilang syntax highlighting, Prism Syntax Highlighter, Pre Code Parser, Pre Code Seleksi atau pembungkus script di dalam postingan blog mempunyai fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemprograman, script, atau markup, seperti HTML, CSS, JavaScript dan sebagainya. Fitur ini memudahkan kita dalam menulis dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup.
Dengan menggunakan syntax highlighter atau penyorotan sintaks, bahasa pemrograman lebih mudah dibaca oleh manusia, jadi bagi kalian yang suka membagikan script di blognya, cocok sekali untuk menggunakan Prism Syntax Highlighter ini yang akan membuat si pengunjung lebih jelas memahami perbedaan penempatan sebuah script.
Pada kesempatan kali ini, saya akan memberikan tutorial blog tentang cara membuat Syntax Highlighter. Untuk melihat tampilan Prism Syntax Highlighter dengan jelas silahkan lihat di link berikut ini.
Baca Juga
Cara Membuat Syntax Highlighter di Blog
- Login ke Blogger.com
- Pilih Template → Edit HTML
- Cari Kode ]]></b:skin> atau </style>
- Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas.
/* CSS Chou Tzu-yu 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: #00fff6;
}
pre.code-html code {
color: #e9ed00;
}
pre.code-javascript code {
color: #dc00ff;
}
pre.code-jquery code {
color: #ffa;
}
- Selanjutnya, Tinggal Memasukan Javascriptnya.
- Cari </body> dan masukan Javascript di bawah ini tepat di atasnya.
<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>
- Simpan template
Bagaimana cara memasang Syntax Highlighter Pre Code di dalam postingan blog?
Di bawah ini kode HTML untuk memasang Syntax Highlighter Pre Code di dalam postingan.
<pre class='code code-html'><label>HTML</label><code>
//*-- Letakan Script HTMLnya Di Sini --*//
</code></pre>
<pre class='code code-css'><label>CSS</label><code>
//*-- Letakan Script CSSnya Di Sini --*//
</code></pre>
<pre class='code code-javascript'><label>JS</label><code>
//*-- Letakan Script Javascriptnya Di Sini --*//
</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>
//*-- Letakan Script jquerynya Di Sini --*//
</code></pre>
- Buka postingan kalian
- Kemudian masuk ke bagian HTML bukan
Compose - Dan pastekan kode diatas yang mau di pakai
- Penting : Sebelum memasukkan script, parse ke HTML dulu scriptnya agar terbaca. Kalian bisa parse scriptnya Di Sini
Contoh: Jika kalian ingin memakai script...
HTML
<pre class='code code-html'><label>HTML</label><code>...</code></pre>CSS
<pre class='code code-css'><label>CSS</label><code>...</code></pre>Javascript
<pre class='code code-javascript'><label>JS</label><code>...</code></pre>jquery
<pre class='code code-jquery'><label>Jquery</label><code>...</code></pre>Suka suka gua
<pre><label>Suka suka gua</label><code>...</code></pre>Itulah artikel mengenai cara membuat syntax highlighter di blogger, selamat mencoba dan semoga bermanfaat.
