Membuat Kolom Syntax Highlighter di Blogger - Mas Fadli
News Update
Loading...

Wednesday, 11 September 2019

Membuat Kolom Syntax Highlighter di Blogger

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

Share with your friends

Give us your opinion

Notification
Selamat datang di masfadli.com. Semoga apa yang saya tuliskan dapat bermanfaat untu kalian semua. Jika ada kritik dan saran kalian isikan dikolom komentar ya. Selamat membaca.
Done