|
[[Berkas:HTML source code example.svg|jmpl|Penyorotan sintaksis HTML]]
'''PenyorotPenyorotan sintakssintaksis''' merupakan fitur teks editor atau [[penyunting teks]] yang digunakan dalam [[bahasa pemrograman]], skrip , atau [[bahasa markah]] seperti [[HTML]], [[Cascading Style Sheets|CSS]], dan [[JavaScript]] . Fitur tersebut akan menampilkan scriptskrip berwarna dalam format teks dan disertai dengan font[[Fon komputer|fon]] yang telah ditentukan. Dengan Penyorot sintaks tersebut, blogger bisa dengan mudah menampilkan script ke dalam artikel tulisan tanpa harus menggunakan plugin atau fitur pihak ketiga.
== Sejarah ==
Ide penggunaan syntaxsintaksis sendiri pertama kali digunakan oleh Wilfred Hansen dalam penyunting teks Emily pada tahun 1969.<ref name=hansen>{{cite conference | first = Wilfred J. | last = Hansen | title = User engineering principles for interactive systems | booktitle = Proceedings of the Fall Joint Computer Conference FJCC 39 | pages = 5623–532 | publisher = AFIPS | year = 1971}}</ref><ref>{{cite web|last=Hansen|first=Wilfred|title=Emily - An Editor for Structured Text|url=https://www.cs.cmu.edu/~wjh/Emily.html|accessdate=17 June 2013}}</ref> KarenaPenyunting padateks waktuEmily itumenyediakan fiturkemudahan bahasauntuk pemrogramanmelakukan belum[[Pelengkapan selengkapotomatis|pelengkapan]] sepertikode sekarang,bahasa-independen tentutingkat tampilan yang tersedia juga jauh lebih sederhana. Berbeda dengan sekarang, tampilan yang tersedia akan mengikuti tampilan yang sebenarnya dalamlanjut formatsecara HTMLotomatis.
== Cara Penggunaan ==
Sebelum digunakan, script CSS harus dimasukkan terlebih dahulu di bagian kode '''<style>''' struktur HTML seperti berikut ini:<syntaxhighlight lang="css">
.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:'source code pro',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
}
</syntaxhighlight>Setelah itu, penggunaan bisa langsung dilakukan dengan menggunakan format perintah:<pre>
<pre><code>syntax highlighter</code></pre>
</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:<syntaxhighlight lang="javascript">
<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>
</syntaxhighlight>Sedangkan, berikut adalah contoh yang telah diparse:<syntaxhighlight lang="javascript">
<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>
</syntaxhighlight>Untuk pemasangan langsung ke bagian HTML, maka diperlukan parse terlebih dahulu dengan pembungkus berupa kode syntax. Berikut adalah contoh dari pemasangan kode syntax highlighter:<syntaxhighlight lang="html">
<html>
<head>
<title>wikipedia</title>
</head>
<body>
<p>
<pre><code><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></code></pre>
</p>
</body>
</html>
</syntaxhighlight>
== Referensi ==
{{Reflist}}
[[Kategori:Teknik antarmuka pengguna]]
{{komputer-stub}}
| 