Cara membuat Syntax Highlighter di dalam Postingan - Template LinkMagz

Apa itu apa itu Syntax Highlighter

Syntax Highlighter adalah Penyorotan sintaksis merupakan fitur penyunting teks yang digunakan dalam bahasa pemrograman, skrip, atau bahasa markah seperti HTML, CSS, dan JavaScript.

FIGHAZ MC | PORTAL

Cara membuat Syntax Highlighter di dalam Postingan - Template LinkMagz

Fitur ini akan menampilkan skrip berwarna dalam format teks dan disertai dengan fon yang telah ditentukan. Untuk pewarnaan disini saya bagikan satu warna saja tetapi kalian bisa merubah warnanya sesuai selera.

Fighaz Mc | Portal

Salin kode berikut dibawah ini

.post-body pre {
  background-color: #292E34; 
  border-left: 5px solid #008c5f; 
  padding:0; 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: #BFBF90; 
  font-size: 12px; 
  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
}

Langkah pemasangan Syntax Highlighter di Template LinkMagz

• Masuk ke Dashboard blogger > Pilih Tata Letak

• Pilih Costum CSS > Kemudian Paste Kode Diatas Didalamnya

Untuk merubah Warna Agar Tampilan Syntax Highlighter lebih menarik silah ganti kode warna :

warna background : " background-color: #292E34 "

variasi border kiri : " border-left: 5px solid #008c5f "

warna huruf : " color: #BFBF90 "

ukuran huruf : " font-size: 12px "

Cara Penulisan Syntax Highlighter di dalam postingan

Dalam halaman penulisan artikel ubah menjadi Html

Kemudian gukan kode <pre>.....</pre> untuk membuat Syntax Highlighter

Contoh :

<pre>

  <!-- kode html, css ata javascript disini -->

</pre>

Sekian cara membuat Syantax Highlighter di Template LinkMagz. Semoga Bisa Bermanfaat. Terimakasih