prettify.js sebagai pendukung untuk menjalankan program syntax highlighter. Prettify atau prettyprint adalah salah satu plugin populer yang cukup ringan sehingga banyak digunakan dalam pembuatan Syntax Highlighter untuk mengubah cuplikan kode-kode HTML / xml / CSS yang disajikan dalam artikel agar menjadi lebih cantik dan berwarna, sehingga lebih mudah dipelajari dan tidak membuat pembaca cepat pusing.Penggunaan Syntax Highlighter umumnya diterapkan pada blog yang membahas tentang tutorial seputar kode HTML, Javascript, dan CSS atau sering disebut niche coding. Sementara untuk yang lainnya lebih baik untuk tidak menggunakannya, karena memang tidak diperlukan.
Contoh cuplikan kode tanpa Syntax Highlighter
<html> <head> <title>Cara membuat 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 kode 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 program Syntax Highlighter dengan Prettyprint di blog, hal pertama yang harus dilakukan adalah 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 menu Tema, klik Edit HTML
3. Salin script prettify.js, letakkan di atas kode
</body>. Tujuannya adalah agar tidak memblokir perenderan konten utama, dimana ini sangat erat kaitannya dengan cara mempercepat loading blog. Jika terpaksa (script tidak bekerja bila diletakkan pada tempat tersebut di atas) letakkan di atas kode </head><script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
4. Salin kode CSS di bawah ini, kemudian letakkan di atas kode ]]></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 hasilnya terdapat nilai atribut yang tidak berjalan dengan semestinya. Tambahkan keterangan
!important pada nilai atribut tersebut.5. Simpan Tema, jika hasilnya masih nihil, lakukan Format template / tema kemudian simpan
Bagaimana cara membuat background Syntax Highlighter menjadi belang-belang?
Ganti kode warna pada CSS berikut
li.L1,li.L3,li.L5,li.L7,li.L9 { background: #2f3741!important; }
Bagaimana cara membuat cuplikan kode Syntax Highlighter agar menjadi sebaris pada setiap nomor barisnya?
Hapus kode
white-space: pre-wrap; kemudian ganti dengan kode overflow: auto;Cara menggunakan prettyprint
Untuk membuat tampilan cuplikan kode menjadi berwarna sangat mudah, cukup bungkus kode 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 adalah contoh cara membuat Syntax Highlighter*/
<title>Bakul Oreg</title>
</pre>
Hasilnya :
<pre class='syntax-highlighter'> /*Ini adalah contoh cara membuat Syntax Highlighter*/ <title>Bakul Oreg</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 kode dengan nomor baris
dji (); rho (); text ();
Bagaimana cara membuat Syntax Highlighter dengan nomor baris bukan dimulai dari angka 1, misalnya 7
Gunakan tanda (:) kemudian diikuti dengan nomor baris yang ingin Anda jadikan sebagai nomor permulaan, lihat contoh berikut ini.
<pre class="prettyprint linenums:7">...Isi kode ...</pre>Contoh potongan kode yang dimulai dari angka 7
// Ini adalah baris ke 7.
.prettyprint {
hight: 1em;
padding: 1em;
border: none;
}
5 comments:
Terimakasih gan
Sama-sama gan
nomor barisnya kok hanya perlima ya bang?
Kalau menggunakan kode css di atas, seharusnya nomornya urut 1 2 3 dst, bukan perlima, kecuali Anda merubah nilai list-style-type menjadi none atau membuang ket. !important
Detail banget ya. puyeng
Post a Comment