Apabila kamu memiliki Blog yang berisi postingan-postingan seputar pemrograman, maka telah barang pasti kamu bakal sangat tak jarang mencantumkan kode. Kode tersebut terbukti tak persoalan apabila hanya terkesan semacam text-text yang lain, bakal namun bakal jauh lebih manis apabila kode-kode tersebut terkesan dengan Syntax highlighting-nya. Nah, berikut ini merupakan salah satu tutorial mudah untuk menampilkan Syntax highlighting di Blogger.
Cara yang paling umum diperbuat untuk menampilkan Syntax highlighting merupakan dengan memakai library Javascript tertentu. Nah, di luar sana tersedia begitu tak sedikit library yang bisa dipakai, kamu hanya butuh memilih mana yang paling mudah serta paling tepat. Serta salah satu library yang paling mudah serta tak sedikit dipakai tersebut merupakan Google Prettyprint/Prettify.
Buka halaman Blogger dari Blog anda, klik menu Template, kemudian klik Edit HTML.
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js adalah tempat hosting dari library dari Google Prettify.
Perbuat penempatan tag pre tersebut kesemua script kode anda. Terbukti sedikit melelahkan serta menyebalkan, bakal namun terbukti sekarang hanya semacam itu yang dapat diperbuat. Mudah-mudahan saya Google segera meng-upgrade Blogger jadi mempunyai tool editor yang lebih baik.
Perbuat preview alias publish untuk menonton hasil postingan anda. Apabila semuanya lancar, maka hasilnya kira-kira semacam di bawah ini.
Bagaimana terlihat lebih manis daripada sekedar text biasa kan.
Lebih lanjut, apabila kamu merasa style desain Google prettify di atas tak lebih tepat, kamu dapat meng-override style dari kelas prettyprint. Caranya merupakan sebagai berikut.
Sebetulnya untuk meningkatkankan rule style tertentu, kamu tak wajib menuliskannya langsung ke template, melainkan dapat ke custom css. Bakal namun saya pribadi lebih suka menuliskannya langsung ke template sebab argumen lebih praktis saja.
Semacam tutorial meningkatkankan script prettify di atas, buka template kamu lagi, kemudian search </head>, serta tambahkan tab style di baris-baris sebelum </head>. Contohnya saya meningkatkankan style di bawah ini sebab saya tak terlalu sreg dengan desain default sebab kodenya terkesan terlalu mepet tepi. Sehingga saya tambahkan padding serta merubah ukuran font supaya lebih ramping.
Kesimpulan
Google Prettfy/Prettyprint adalah salah satu library Syntax highlighting javascript yang sangat mudah untuk dipakai dan sangat terkenal.
Ketidak lebihannya adalah, opsi theme sangat terbatas (anda musti buat sendiri apabila terpaksa), dan dukungan bahasa pemrograman default yang tak terlalu tak sedikit (C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust). Sedangkan bahasa pemrograman lain wajib ditambahkan via ekstensi.
Sekian tip/tips hari ini, semoga yang sedikit ini berguna.
Cara yang paling umum diperbuat untuk menampilkan Syntax highlighting merupakan dengan memakai library Javascript tertentu. Nah, di luar sana tersedia begitu tak sedikit library yang bisa dipakai, kamu hanya butuh memilih mana yang paling mudah serta paling tepat. Serta salah satu library yang paling mudah serta tak sedikit dipakai tersebut merupakan Google Prettyprint/Prettify.
Baca Juga : Tutorial Mudah Cara Mengunci Folder di Semua Versi Windows dengan Folder ProtectorCara memakainya benar-benar mudah, dengan cara umum ada berbagai langkah yang wajib diperbuat, yaitu :
- Load Javascript library
- Tuliskan kode di dalam tag <pre class="prettyprint">
- Tweaking style jika diperlukan
Load Javascript library
Intinya kamu wajib meningkatkankan tag <script> di dalam <head> di template Blogger anda. Caranya merupakan sebagai berikut.Buka halaman Blogger dari Blog anda, klik menu Template, kemudian klik Edit HTML.
 |
| klik gambar untuk memperbesar |
Maka akan muncul HTML Editor sederhana untuk template anda.
 |
| klik gambar untuk memperbesar |
Tambahkan library javascript Google Prettify di dalam head. Saya pribadi senang menempatkan custom library javascript pada baris paling akhir sebelum </head>. Oleh karena itu klik kombinasi tombol Ctrl f untuk melakukan pencarian, kemudian masukkan </head>, lalu tekan enter.
 |
| klik gambar untuk memperbesar |
Di atas tag </head> tersebut, tambahkan baris baru yang berisi :
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
 |
| klik gambar untuk memperbesar |
skin=desert artinya theme yang saya pilih adalah desert. Pada saat tulisan ini saya tulis, hanya terdapat 5 pilihan Prettify theme, yaitu :
- default
- sons-of-obsidian
- desert
- sunburst
- doxy
Silahkan ganti desert di atas dengan theme yang kamu sukai. Apabila butuh kamu dapat membikin theme sendiri. Kemudian tekan tombol Save template untuk menyimpan template.
Tuliskan kode di dalam tag <pre class="prettyprint">
Seusai template di setting, kini kamu telah dapat membikin postingan yang berisi kode-kode semacam biasa. Hanya saja, seusai kamu menuliskan kode, kamu wajib memasukkan kode-kode tersebut di dalam tag <pre>. Klik tombol HTML untuk menampilkan posting ke dalam mode advance HTML.
Kemudian tambahkan tag <pre class="prettyprint"> di awal kode anda, dan jangan lupa tutup dengan </pre> di akhir kode.
 |
| klik gambar untuk memperbesar |
Kemudian tambahkan tag <pre class="prettyprint"> di awal kode anda, dan jangan lupa tutup dengan </pre> di akhir kode.
 |
| klik gambar untuk memperbesar |
Perbuat penempatan tag pre tersebut kesemua script kode anda. Terbukti sedikit melelahkan serta menyebalkan, bakal namun terbukti sekarang hanya semacam itu yang dapat diperbuat. Mudah-mudahan saya Google segera meng-upgrade Blogger jadi mempunyai tool editor yang lebih baik.
Baca Juga : Tutorial Cara membuat Intro & Outro Vlog Youtubers secara online dengan mudah Tanpa Software
Perbuat preview alias publish untuk menonton hasil postingan anda. Apabila semuanya lancar, maka hasilnya kira-kira semacam di bawah ini.
 |
| klik gambar untuk memperbesar |
Bagaimana terlihat lebih manis daripada sekedar text biasa kan.
Tweaking style jika diperlukan
Selanjutnya anda bisa lebih mengeksplorasi fitur-fitur lain dari Google Prettify ini. Silahkan langsung cek ke link ini. Tergolong bagaimana tutorial menampilkan nomor baris, serta mengatur supaya menampikan kode ke sintak tertentu.Lebih lanjut, apabila kamu merasa style desain Google prettify di atas tak lebih tepat, kamu dapat meng-override style dari kelas prettyprint. Caranya merupakan sebagai berikut.
Sebetulnya untuk meningkatkankan rule style tertentu, kamu tak wajib menuliskannya langsung ke template, melainkan dapat ke custom css. Bakal namun saya pribadi lebih suka menuliskannya langsung ke template sebab argumen lebih praktis saja.
Semacam tutorial meningkatkankan script prettify di atas, buka template kamu lagi, kemudian search </head>, serta tambahkan tab style di baris-baris sebelum </head>. Contohnya saya meningkatkankan style di bawah ini sebab saya tak terlalu sreg dengan desain default sebab kodenya terkesan terlalu mepet tepi. Sehingga saya tambahkan padding serta merubah ukuran font supaya lebih ramping.
.prettyprint {
padding: 5px;
font-size: 11px;
line-height: 15px;
font-family: monospace;
}
 |
| klik gambar untuk memperbesar |
Kesimpulan
Google Prettfy/Prettyprint adalah salah satu library Syntax highlighting javascript yang sangat mudah untuk dipakai dan sangat terkenal.
Ketidak lebihannya adalah, opsi theme sangat terbatas (anda musti buat sendiri apabila terpaksa), dan dukungan bahasa pemrograman default yang tak terlalu tak sedikit (C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust). Sedangkan bahasa pemrograman lain wajib ditambahkan via ekstensi.
Sekian tip/tips hari ini, semoga yang sedikit ini berguna.
Sumber : Code-prettify
EmoticonEmoticon