Membuat Sisipan Script Pemrograman (Code Snippet) pada Post Blogger dengan Highlight.js

byHani Mauliza •
0


Pernah melihat postingan di blog tentang pemrograman yang ada bagian script/bahasa pemrogramannya bisa ditampilkan khas seperti di text editor seperti Sublime, atau Visual Code, atau NotePad++ ?
Saya juga bertanya-tanya bagaimana cara membuatnya ?, apa penulisnya membuat sendiri CSS nya atau bagaimana ?
Ternyata caranya mudah loh, kita bisa menggunakan Library yang sudah ada, kali ini akan saya coba buat dengan Highlight.js.

Masukkan librarynya / Panggil Library Hightlight Js nya ke dalam Tema Kita

  • Pertama silahkan buka blog kalian, pilih menu Tema


  • Pada bagian Tema Saya, klik tanda penunjuk kebawah di tombol Sesuaian.


  • Pilih Edit HTML
  • Masukkan kode seperti dibawah ini setelah kode <head>

  • Script pada kota biru itu adalah memanggil javascriptnya, disitu saya menggunakan versi paling baru yaitu 11.2.0 pada saat saya membuat postingan ini.
  • Script pada kotak merah adalah memanggil css nya, jadi disitu saya memakai yang tema monokai-sublime. Kamu bisa menggunakan tema yang lainnya, silahkan lihat dihalaman demo ini, dan untuk memakainya cari nama temanya dengan di halaman cdnjs ini. 
  • Untuk mempermudah silahkan bisa copy yg dibawah ini ya.

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/atom-one-dark-reasonable.min.css' integrity='sha512-RwXJS3k4Z0IK6TGoL3pgQlA9g2THFhKL7z9TYWdAI8u6xK0AUuMWieJuWgTRayywC9A94ifUj1RzjDa1NIlUIg==' referrerpolicy='no-referrer' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha512-em+auep3XCqTMWhrRbZbwCisVtLwbje55zAE5qYrPX7H48rIy87jTnnl1XKMSQPxyP1Y6LQNZQcefFd9qzi7KQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/r.min.js'/>

<script>hljs.highlightAll();</script>

  • Simpan, selamat kita sudah memanggil library highlight js untuk digunakan di blog kita.

Menggunakannya dalam Postingan Blog

Disini kita hanya akan mencoba beberapa sampel ya, saya akan mencoba dengan script php, html, dan javascript. 

Untuk mempermudah saya biasanya mengetikkan text penanda di Tampilan Menulisnya seperti ini misal Letakkan Disini.
dan kemudian bisa saya search di mode Tampilan HTML dengan text penandanya, lalu saya enter. dengan begitu kita akan lebih mudah untuk menuliskan script yang akan highlight.

Lalu saya mengganti text penanda tadi dengan script yang akan digunakan jadi seperti ini.


Mulai Membuat Code Snippet

Jika kamu tidak mengisikan class="language-html", maka highlight js akan mendeteksi otomatis bahasa apa yang kamu gunakan tapi jika kamu ingin mendefiniskannya misal bahasa HTML. Maka bisa diisikan class language htmlnya. Untuk script HTML kita bisa menggunakan script ini.

<pre><code class="language-html">...</code></pre>

isi script HTMLmu didalam tag <code>.

Pada beberapa kasus Highlighter tidak bisa bekerja di script yang ada kode < dan >,
 maka gunakan cara dibawah ini :
Sebelum copy kan script nya ke dalam tag <code>, find and replace < dengan &lt; dan untuk > gantikan dengan &gt;  

Mari Kita Praktekan, Berikut Ini adalah kode yang akan saya tuliskan dengan highlight js

KODE HTML


<html>
	<button class="button">Click Here</button>
</html>

KODE PHP


echo "hello ! world";

KODE JAVASCRIPT


function textme(id)
{
    alert('hai'+id);
    return false;
}


Nah sudah jadi, silahkan diterapkan pada blog atau web masing-masing ya.

Tags:

Post a Comment

Previous Post Next Post