Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Syntax Highlighter Blog di Blogger dengan CSS

Syntax highlighter

Syntax Highlighter merupakan text editor yang berfungsi untuk menampilkan teks berupa source code pada halaman web. Dengan menggunakan syntax highlighter, akan memudahkan kita dalam menuliskan source code atau bahasa terstruktur seperti bahasa markup dan membuat source code yang dituliskan menjadi lebih rapi, juga dapat memudahkan pengunjung dalam membedakan mana yang merupakan kode HTML, CSS, atau JavaScript dengan tulisan biasa.

Pada umumnya syntax highlighter sering digunakan pada blog tutorial yang sering membagikan source code. Jadi jika blog kamu merupakan blog tutorial yang sering membagikan source code maka tidak salahnya untuk memasang syntax highlighter di blog kamu.

Berikut langkah-langkah untuk membuat syntax highlighter.

Cara Membuat Syntax Highlighter di Blogger

1. Silahkan masuk ke Dashboard Blogger kalian.

2. Pilih menu Tema => Klik Edit HTML

3. Letakan kode dibawah ini tepat sebelum kode </style>.


 .post-body pre {   background-color: #292E34; /* warna background */   border-left: 5px solid #de0985; /* 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 }

4. Untuk menggunakan Syntax Highlighternya, silahkan masukan kode dibawah ini ke dalam postingan kalian.


 <pre><code>   <!-- Masukkan semua kode Javascript, HTML atau CSS disini --> </pre></code>

Demikianlah tutorial untuk membuat Syntax Highlighter di Blogger. Semoga bermanfaat.