Penyorotan sintaksis

Syntax highlighter merupakan fitur teks editor atau penyunting teks yang digunakan dalam bahasa pemrograman, skrip , atau bahasa markup seperti HTML, CSS, dan JavaScript . Fitur tersebut akan menampilkan script berwarna dalam format teks dan disertai dengan font yang telah ditentukan. Dengan syntax highlighter tersebut, blogger bisa dengan mudah menampilkan script ke dalam artikel tulisan tanpa harus menggunakan plugin atau fitur pihak ketiga.

Sejarah

Ide penggunaan syntax sendiri pertama kali digunakan oleh Wilfred Hansen pada tahun 1969. Karena pada waktu itu fitur bahasa pemrograman belum selengkap seperti sekarang, tentu tampilan yang tersedia juga jauh lebih sederhana. Berbeda dengan sekarang, tampilan yang tersedia akan mengikuti tampilan yang sebenarnya dalam format HTML.

Cara Penggunaan

Sebelum digunakan, script CSS harus dimasukkan terlebih dahulu di bagian kode <style> struktur HTML seperti berikut ini:

.post-body pre {
  background-color: #0c1c2e; /* warna background */
  border-left: 5px solid #279fd3; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #bfbf90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:&#39;source code pro&#39;,menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Setelah itu, penggunaan bisa langsung dilakukan dengan menggunakan format perintah:

<pre><code>syntax highlighter</code></pre>

Sebelum melakukan penginputan script dalam bentuk syntax highlighter, jangan lupa untuk melakukan parse script terlebih dahulu. Jika diartikan secara sederhana, parse merupakan modifikasi kode sedemikian rupa untuk mengikuti format bahasa yang digunakan. Berikut adalah contoh dari file mentah script:

<textarea id="codes" placeholder="Salin kode script Anda di sini..." spellcheck="false" style="height: 180px; margin: 0px; width: 760px;"></textarea><br />
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;"><b>Parse</b></button>

Sedangkan, berikut adalah contoh yang telah diparse:

&lt;textarea id=&quot;codes&quot; placeholder=&quot;Salin kode script Anda di sini...&quot; spellcheck=&quot;false&quot; style=&quot;height: 180px; margin: 0px; width: 760px;&quot;&gt;&lt;/textarea&gt;&lt;br /&gt;
&lt;div class=&quot;button-group&quot;&gt;
&lt;button id=&quot;convert&quot; onclick=&quot;cdConvert();this.disabled = true;&quot;&gt;&lt;b&gt;Parse&lt;/b&gt;&lt;/button&gt;

Untuk pemasangan langsung ke bagian HTML, maka diperlukan parse terlebih dahulu dengan pembungkus berupa kode syntax. Berikut adalah contoh dari pemasangan kode syntax highlighter:

<html>
    <head>
      <title>wikipedia</title>
    </head>
    <body>
        <p>
            <pre><code></code></pre>&lt;textarea id=&quot;codes&quot; placeholder=&quot;Salin kode script Anda di sini...&quot; spellcheck=&quot;false&quot; style=&quot;height: 180px; margin: 0px; width: 760px;&quot;&gt;&lt;/textarea&gt;&lt;br /&gt;
&lt;div class=&quot;button-group&quot;&gt;
&lt;button id=&quot;convert&quot; onclick=&quot;cdConvert();this.disabled = true;&quot;&gt;&lt;b&gt;Parse&lt;/b&gt;&lt;/button&gt;</code></pre>
        </p>
    </body>
</html>

Perlu diketahui, tulisan di atas dibuat dengan informasi yang relevan dengan sumber yang dapat dipercaya.