Membuat Highlighter Berwarna di Blog dengan highlight.js
HomeBloggerHTML

Membuat Highlighter Berwarna di Blog dengan highlight.js

Cara membuat sintaks highlight di blogger, menggunakan highlight js pada blogspot, membuat kode berwarna di postingan blog


Syntax Highlighter umumnya digunakan oleh para mastah yang suka share koding-koding tutorial dengan berbagai bahasa pemrograman untuk mempercantik tampilan kodingnya. Jika kalian melihat thumbnail di atas, itu merupakan tampilan dari text editor "Sublime Text 3" yang mana sintak penulisannya mirip dengan highlight yang akan kita bahas dalam postingan ini.

Lantas untuk apa, kita yang bukan seorang ahli koding tapi menggunakan syntax highlight ? Jika kalian tidak membutuhkan yaa maaf  haha. Sejatinya, dengan kalian masuk ke postingan ini berarti kalian calon-calon programmer nih.
Belajar bukan berarti kalian harus menjadi ahli, tapi belajar adalah proses menghilangkan keresahan dan kegundahan. ~Guru Kudet
Membuat tag <pre> dan <code> menjadi lebih menarik dengan diberikan sentuhan warna, selain enak dilihat, kode juga akan lebih mudah di pahami. Berikut contoh penggunaanya:
<form action="check-login.php" class="inner-login" method="post">
<h3 class="text-center title-login">SMK WITAR </h3>
<div class="form-group">
   <input type="text" class="form-control" name="username" placeholder="Username">
</div>

<div class="form-group">
   <input type="password" class="form-control" name="password" placeholder="Password">
</div>

<input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
                
<div class="text-center forget">
<p>Forgot Password ?</p>
                    
   </div>
</form>

Nah, diatas merupakan contoh penerapan sintaks highlight-nya. Sejauh ini, paham kan ya yang dimaksud highlighter itu seperti apa.

Cara Membuat Syntax Highlight dengan highlight.js

highlight.js merupakan sebuah modul yang berfungsi untuk membuat tampilan kode menjadi berwarna, untuk mempelajari lebih jauh terkait highlight.js bisa langsung menuju web resminya.

cara mudah membuat tag pre berwarna

1. Memasang hightlight.js di Blogspot

Karena di blogger tidak menyediakan tempat menyimpan file (hosting), jadi kita ambil modul highlight.js yang disediakan oleh situs resminya

Buka Blogger > Edit Template > Cari kode </body> pastekan kode di bawah ini tepat di atas tag </body>
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
versi terbaru highlight.js adalah 9.15 (ketika artikel ini ditulis). Jika ingin merasakan versi terbaru kalian tinggal ganti angka 9.12.0 dengan versi terbaru saja brader.

2. Cara menggunakan highlight.js

Tak ada aturan yang rumit untuk menggunakan syntax highlight ini, cukup apit text kode dengan tag <pre><code> teks kalian </code></pre> . Kode yang diapit tersebut akan diidentifikasi berdasarkan bahasa pemrograman yang digunakan dan diberikan sentuhan warna.
Contoh dalam mode HTML
<pre><code> &lt;video&gt; . . . &lt;/video&gt;</code></pre>
Tampilan dalam mode Compose
<video> . . . </video>
Penulisan tag <pre><code> . . . </code></pre> di mode HTML dan koding yang ingin kalian tampilkan harus sudah di parse. Tools untuk parse HTML banyak bersebaran di internet ya. Contoh parse HTML seperti di atas yang tadinya kurung siku (<) menjadi &lt;

3. Cara Membuat Scroll pada Syntax Highlight

Umumnya banyak di temukan di blog-blog tutorial berupa koding yang panjang dan menyita ruang sekali, alternatif yang bisa di gunakan adalah memberikan atribut overflow untuk menambahkan scrolling pada teks highlight. Contoh penggunaan Scrolling pada Syntax Highlight.

Tambahkan CSS berikut pada postingan kalian di mode HTML
<style>
#id {
 width: 100%;
  height: 110px;
  overflow: scroll;}
</style>

atau simpan pada template sobat di atas kode ]]></b:skin> tanpa tag <style> . . . </style>.
Pemanggilan CSS-nya
<pre><code id="id"> &lt;video&gt; . . . &lt;/video&gt;</code></pre>
Untuk merubah tinggi atau lebarnya cukup ubah value nya saja ya.

Cara mudah menulis kode berwarna pada postingan blog dirasa cukup mudah bukan, jangan lupa jika ada yang saya tulis dirasa keliru ditunggu kritik yang membangunnya.
Instal Komputer Bojong Purwakarta

COMMENTS

DISQUS
Nama

Administrasi,3,Bank Soal,1,Basis Data,2,Blogger,7,Bootstrap,2,CSS,2,HTML,3,JW Player,1,Komputer,2,Materi,5,MySQL,2,Office,2,Pemrograman Web,5,PHP,3,PKL,1,Prakerin,2,RPL,6,Sekolah,7,Simulasi,1,Sistem Operasi,1,Soal,1,UJIKOM,2,UKK,1,UNBK,2,USBN,1,Video JS,1,X RPL,1,XI RPL,1,XII RPL,2,
ltr
item
RPL Wibawa Taruna: Membuat Highlighter Berwarna di Blog dengan highlight.js
Membuat Highlighter Berwarna di Blog dengan highlight.js
Cara membuat sintaks highlight di blogger, menggunakan highlight js pada blogspot, membuat kode berwarna di postingan blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLsE_laoSsOArsMtCQLI1eSepWn1DXcJLzBbn3qLT7JX18OfHJ_d1TfNJU83tyS_LsY5i5DoJ5jg_1pSn-5c_MU6u2OqlxRzHs_ZvdEXKfzXSAn4E4cnpEKmBagxnZgLnt8YfoxBrm6pf/s400/highlighter.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoLsE_laoSsOArsMtCQLI1eSepWn1DXcJLzBbn3qLT7JX18OfHJ_d1TfNJU83tyS_LsY5i5DoJ5jg_1pSn-5c_MU6u2OqlxRzHs_ZvdEXKfzXSAn4E4cnpEKmBagxnZgLnt8YfoxBrm6pf/s72-c/highlighter.jpg
RPL Wibawa Taruna
https://rpl-smkwitar.blogspot.com/2019/06/membuat-highlighter-berwarna-di-blog.html
https://rpl-smkwitar.blogspot.com/
https://rpl-smkwitar.blogspot.com/
https://rpl-smkwitar.blogspot.com/2019/06/membuat-highlighter-berwarna-di-blog.html
true
914819828553775010
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy