Syntax Highlighter ialah sebuah cara untuk menciptakan cuplikan isyarat html menjadi lebih anggun dengan mengelompokkan setiap jenis isyarat kedalam warna tertentu secara otomatis menggunakan css dan script pendukung / plugin. Pada tutorial ini, saya akan menggunakan
Penggunaan Syntax Highlighter umumnya diterapkan pada blog yang membahas perihal tutorial seputar isyarat HTML, Javascript, dan CSS atau sering disebut niche coding. Sementara untuk yang lainnya lebih baik untuk tidak menggunakannya, alasannya memang tidak diperlukan.
Contoh cuplikan isyarat tanpa Syntax Highlighter
Contoh cuplikan isyarat menggunakan Syntax Highlighter
Cara pemasangan
Untuk menjalankan jadwal Syntax Highlighter dengan Prettyprint di blog, hal pertama yang harus dilakukan ialah memasang skrip
1. Masuk ke Blogger, pilih blog yang ingin Anda pasang prettyprint
2. Pilih sajian Tema, klik Edit HTML
3. Salin script prettify.js, letakkan di atas isyarat
4. Salin isyarat CSS di bawah ini, lalu letakkan di atas isyarat ]]></b:skin> atau </style>
Jika kesudahannya terdapat nilai atribut yang tidak berjalan dengan semestinya. Tambahkan keterangan
5. Simpan Tema, jikalau kesudahannya masih nihil, lakukan Format template / tema lalu simpan
Bagaimana cara menciptakan background Syntax Highlighter menjadi belang-belang?
Ganti isyarat warna pada CSS berikut
Bagaimana cara menciptakan cuplikan isyarat Syntax Highlighter supaya menjadi sebaris pada setiap nomor barisnya?
Hapus isyarat
Cara menggunakan prettyprint
Untuk menciptakan tampilan cuplikan isyarat menjadi berwarna sangat mudah, cukup bungkus isyarat dengan cara berikut ini.
Masuk mode HTML (sebelah Compose)
Contoh :
<pre class="prettyprint">
<pre class='syntax-highlighter'>
/*Ini ialah pola cara menciptakan Syntax Highlighter*/
<title></title>
</pre>
Hasilnya :
Bagaimana cara menampilkan nomor baris pada cuplikan kode?
Untuk menampilkan nomor baris, gunakan cara berikut ini.
Contoh cuplikan isyarat dengan nomor baris
Bagaimana cara menciptakan Syntax Highlighter dengan nomor baris bukan dimulai dari angka 1, contohnya 7
Gunakan tanda (:) lalu diikuti dengan nomor baris yang ingin Anda jadikan sebagai nomor permulaan, lihat pola berikut ini.
Contoh bagian isyarat yang dimulai dari angka 7
prettify.js sebagai pendukung untuk menjalankan jadwal syntax highlighter. Prettify atau prettyprint ialah salah satu plugin terkenal yang cukup ringan sehingga banyak dipakai dalam pembuatan Syntax Highlighter untuk mengubah cuplikan kode-kode HTML / xml / CSS yang disajikan dalam artikel supaya menjadi lebih anggun dan berwarna, sehingga lebih gampang dipelajari dan tidak menciptakan pembaca cepat pusing.Penggunaan Syntax Highlighter umumnya diterapkan pada blog yang membahas perihal tutorial seputar isyarat HTML, Javascript, dan CSS atau sering disebut niche coding. Sementara untuk yang lainnya lebih baik untuk tidak menggunakannya, alasannya memang tidak diperlukan.
Contoh cuplikan isyarat tanpa Syntax Highlighter
<html> <head> <title>Cara menciptakan Syntax Highlighter di blog</title> </head> <body> <div class='syntax-highlighter'> Apa itu Syntax Highlighter? Apa fungsi dan kegunaannya? Cari jawabannya di sini. </div> </body> </html>
Contoh cuplikan isyarat menggunakan Syntax Highlighter
<html> <head> <title>Cara memasang prettyfy Syntax Highlighter di Blogger</title> </head> <body> <div class='prettyprint'> Apa itu prettyprint? Bagaimana cara memasang dan menggunakannya? Temukan jawabannya di sini. </div> </body> </html>
Cara pemasangan
Untuk menjalankan jadwal Syntax Highlighter dengan Prettyprint di blog, hal pertama yang harus dilakukan ialah memasang skrip
prettify.js dan CSS prettyprint di dalam Tema / Template blog. Ikuti langkah-langkah berikut ini1. Masuk ke Blogger, pilih blog yang ingin Anda pasang prettyprint
2. Pilih sajian Tema, klik Edit HTML
3. Salin script prettify.js, letakkan di atas isyarat
</body>. Tujuannya ialah supaya tidak memblokir perenderan konten utama, dimana ini sangat dekat kaitannya dengan cara mempercepat loading blog. Jika terpaksa (script tidak bekerja bila diletakkan pada daerah tersebut di atas) letakkan di atas isyarat </head><script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
4. Salin isyarat CSS di bawah ini, lalu letakkan di atas isyarat ]]></b:skin> atau </style>
pre .str, code .str { color: #65B042; } /* string - hijau */ pre .kwd, code .kwd { color: #E28964; } /* keyword - kuning gelap */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - abu-abu */ pre .typ, code .typ { color: #bdb76b; } /* type - kuning yaiz */ pre .lit, code .lit { color: #3387CC; } /* literal - biru */ pre .pun, code .pun { color: #bdb76b; } /* punctuation - kuning yaiz */ pre .pln, code .pln { color: #fff; } /* plaintext - putih */ pre .tag, code .tag { color: #77bdff; } /* warna tag html/xml - biru langit */ pre .atn, code .atn { color: #dd7700; } /* warna nama attribute html/xml - oranye */ pre .atv, code .atv { color: #65B042; } /* warna nilai attribute html/xml - hijau */ pre .dec, code .dec { color: #3387CC; } /* decimal - biru */ pre.prettyprint, code.prettyprint { background-color: #2f3741; border: none!important; border-left: 4px solid #fff!important; } pre.prettyprint { white-space: pre-wrap; margin: 1em auto; padding: 1em; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal!important; } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { background: #2f3741!important; } Jika kesudahannya terdapat nilai atribut yang tidak berjalan dengan semestinya. Tambahkan keterangan
!important pada nilai atribut tersebut.5. Simpan Tema, jikalau kesudahannya masih nihil, lakukan Format template / tema lalu simpan
Bagaimana cara menciptakan background Syntax Highlighter menjadi belang-belang?
Ganti isyarat warna pada CSS berikut
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #2f3741!important; } Bagaimana cara menciptakan cuplikan isyarat Syntax Highlighter supaya menjadi sebaris pada setiap nomor barisnya?
Hapus isyarat
white-space: pre-wrap; lalu ganti dengan isyarat overflow: auto;Cara menggunakan prettyprint
Untuk menciptakan tampilan cuplikan isyarat menjadi berwarna sangat mudah, cukup bungkus isyarat dengan cara berikut ini.
Masuk mode HTML (sebelah Compose)
<pre class="prettyprint">...Isi kode ...</pre> atau<code class="prettyprint">...Isi kode ...</code>Contoh :
<pre class="prettyprint">
<pre class='syntax-highlighter'>
/*Ini ialah pola cara menciptakan Syntax Highlighter*/
<title></title>
</pre>
Hasilnya :
<pre class='syntax-highlighter'> /*Ini ialah pola cara menciptakan Syntax Highlighter*/ <title></title>
Bagaimana cara menampilkan nomor baris pada cuplikan kode?
Untuk menampilkan nomor baris, gunakan cara berikut ini.
<pre class="prettyprint linenums">...Isi kode ...</pre>Contoh cuplikan isyarat dengan nomor baris
dji (); rho (); text ();
Bagaimana cara menciptakan Syntax Highlighter dengan nomor baris bukan dimulai dari angka 1, contohnya 7
Gunakan tanda (:) lalu diikuti dengan nomor baris yang ingin Anda jadikan sebagai nomor permulaan, lihat pola berikut ini.
<pre class="prettyprint linenums:7">...Isi kode ...</pre>Contoh bagian isyarat yang dimulai dari angka 7
// Ini ialah baris ke 7. .prettyprint { hight: 1em; padding: 1em; border: none; } 
