Cara Membuat Syntax Highlighter di Blog Dengan CSS

 Pada kesempatan kali ini admin akan memberikan sedikit tutorial Cara Membuat Syntax Highlighter di Blog Dengan CSS. 

Sebelum kalian membuat Syntax Highlighter, kalian harus tau apa itu Syntax Highlighter dan apa fungsi dari Syntax tersebut. 

Pengertian dari Syntax

Syntax Highlighter adalah fitur editor teks yang biasa digunakan untuk pemrograman, contohnya seperti HTML, CSS dan kode lainnya. 

Fitur ini untuk menampilkan teks kode, terutama kode sumber dalam berbagai warna dan font sesuai kategori. 

Fungsi dari Syntax

Syntax highlighter akan membantu kalian para blogger atau programmer untuk membuat potongan struktur kode secara online dengan mudah, pastinya dengan tampilan yang  rapih dan pastinya cantik. 

Syntax highlighter juga banyak digunakan oleh para blogger yang memiliki blog dengan kategori tentang tutorial blog atau web code. 

Dengan menggunakan syntax highlighter dipostingan tutorial yang berbagai kode HTML/CSS/JS, maka hasilnya akan membuat postingan tertata rapih pastinya. 

Saat ini sudah banyak sekali para blogger yang membuat tutorial menggunakan syntax highlighter pada postingan blog mereka, termasuk blog Saya juga yaitu pedein.com, esp.my.id ini. 

Untuk saat ini kalian ingin yang ingin menggunakan syntax highlighter pada blog, silahkan ikuti langkah-langkah Cara Membuat Syntax Highlighter di Blogger Dengan CSS di bawah ini. 

Cara Membuat Syntax Highlighter di Blog Dengan CSS

Step 1 : Silahkan masuk ke Dashbord Blogger kalian. 

Step 2 : Jika sudah masuk Dashbord pada Blogger, silahkan Klik menu TEMA lalu pilih icon drop bawah. 

Step 3 : Jika kalian sudah Klik icon drop bawah "samping tulisan sesuaikan", silahkan klik EDIT HTML

Step 4 : Jika sudah masuk dalam kode HTML, silahkan cari kode ]]></b:skin> lalu enter. 

Step 5 : Silahkan copy kode di bawah ini, lalu pastekan kodenya di atas kode ]]></b:skin> tersebut. 

.post-body pre {
  background-color: #fff; /* warna background by esp.my.id */
  border-left: 2px solid #00b2ff;border-top: 2px solid #00b2ff;border-right: 2px solid #00b2ff;;border-bottom: 2px solid #00b2ff; /* variasi border by esp */
  padding:0;border-radius:20px; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #00b2ff; /* warna huruf by esp */
  font-size: 12px; /* ukuran huruf by esp */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}
.darkmode .post-body pre {
background:#323232 /* darkmode LinkMagz by esp, Jangan hapus kode ini */
} 

Step 6 : Jika kode sudah ditaro dengan benar, silahkan Simpan Template. 

Step 7 : Selesai, lihat hasilnya

Cara Memasang Syntax Highlighter di Postingan Blog

Step 1 : Klik Tombol Postingan Baru atau Halaman Baru

Step 2 : Silahkan ubah Tampilan Menulis ke Tampilan HTML

Step 3 : Tambahkan kode di bawah ini di dalam postingan tersebut

<pre><code> YOUR KODE
</code></pre>

Step 4 : Publish Postingan atau Page

Step 5 : Lihat hasilnya syntax yang sudah kalian buat. 

Penutup

Untuk tulisan YOUR KODE di atas silahkan ubah dengan kode kalian

Jika kalian sudah mengikuti langkah-langkah penerapan Syntax highlighter di blog dengan benar, maka hasilnya pun pastinya akan  berhasil dan sangat cantik. 

Mungkin itu saya artikel dari saya Cara Membuat Syntax Highlighter di Blog Dengan CSS, jika kalian sudah dengan artikel kali ini jangan lupa di share dan komen di bawah postingan ini, terimakasih.