Membuat Kolom Syntax Highlighter di Blogger

Agus Nuri Fadli    September 11, 2019    Blogger , Tutorial    Comment   

Syntax Highlighter adalah teks editor yang menyoroti markup code yang ada dihalaman web dengan tujuan mempermudah pembaca dalam mengenali seluruh codenya. Kebanyakan ditemukan diblog tutorial seperti masfadli.com. 

Untuk kali ini mimin akan membagikan code untuk membuat Syntax Highlighter memanfaatkan CSS. Jika blogmu bertemakan tutorial sangat cocok menggunakan code ini.

Cara memasang  Syntax Highlighter

1. Buka blogger masuk ke menu tema > edit html.

2. Kemudian cari code </style> lebih cepat dengan menekan Ctrl+f.

3. Jika sudah tambahkan code dibawah ini tepat diatas </style>

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  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; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  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
}

Cara Menggunakan Syntax Highlighter

1. Masuk ke blogger
2. Buat artikel baru
3. Kemudian klik tab HTML
4. Tambahkan 

<pre><code> kemudian tutup dengan </pre></code> 

Contoh:

<pre><code>
   <!-- Masukkan semua code/perintah disini -->
</pre></code>

Note : Jika menggunakan code HTML parse dulu codenya agar tidak bentrok