|
[[Berkas:HTML source code example.svg|jmpl|Penyorotan sintaksis HTML]]
'''SyntaxPenyorotan highlightersintaksis''' merupakan({{lang-en|syntax fiturhighlighting}}) teksmerupakan editor ataufitur [[penyunting teks]] yang digunakan dalam [[bahasa pemrograman]], skrip , atau [[bahasa markupmarkah]] 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 [https://www.ferisp.com/2020/09/cara-memasang-syntax-highlighter-di.html syntax highlighter] tersebut, blogger bisa dengan mudah menampilkan script ke dalam artikel tulisan tanpa harus menggunakan plugin atau fitur pihak ketiga.
== Sejarah ==
Ide penggunaan sintaksis 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> Penyunting teks Emily menyediakan kemudahan untuk melakukan [[Pelengkapan otomatis|pelengkapan]] kode bahasa-independen tingkat lanjut secara otomatis.
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 PenggunaanReferensi ==
{{Reflist}}
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>
[[Kategori:Teknik antarmuka pengguna]]
Sebelum melakukan penginputan script dalam bentuk syntax highlighter, jangan lupa untuk melakukan [https://www.ferisp.com/2020/09/cara-membuat-dan-memasang-tools-parse.html 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 />
{{komputer-stub}}
<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>Perlu diketahui, tulisan di atas dibuat dengan informasi yang relevan dengan sumber yang [https://www.ferisp.com dapat dipercaya].
| 