Pada tulisan kali ini agar tampilan kode atau penyorotan sintaks yang ditunjukan pada web menarik, disini saya menggunakan perpustakaan atau library dari Prism.
Untuk dipasang pada web Blogger cara menggunakannya dengan CDN (Content Delivery Network). Berikut ini gambar tangkapan layarnya:
Supaya lebih jelas ikuti tautan ini. Disana dijelaskan agar memanggil library prism untuk css dan javascript dengan ditandai kotak merah. Tersedia 3 pilihan tempat library dari cdnjs, jsdelivr dan unpkg, selera masing-masing mau pilih dari mana sama saja, yang dipilih disini dari jsdelivr, pada saat ini menggunakan versi 1.28 dan juga dicantumkan beberapa plugins seperti toolbar dan line-numbers.
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
Kode diatas untuk memanggil stylesheet diletakan diantara <head> dengan </head>. Dan untuk memanggil script letakan kode dibawah ini sebelum </body>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/show-language/prism-show-language.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
Disini disertakan juga beberapa plugins seperti autoloader, toolbar, show-language, dan line-numbers supaya tampilannya menarik seperti kode yang ditampilkan diatas.
Untuk menggunakannya pada tulisan atau postingan artikel, dengan menulis kode diantara <pre><code class="language-html line-numbers"> dengan </code></pre> atau seperti berikut ini:
<pre><code class="language-html line-numbers">
tulis kode disini
</code></pre>
Tidak ada komentar:
Posting Komentar
Terima kasih telah berkunjung dan membaca artikel ini. Silahkan berikan saran dan pertanyaan di kolom berikut ini.