Cara Menciptakan Syntax Highlighter Keren Di Blog
Cara Membuat syntax Highlighter keren di blog - Syntax Highlighter fungsinya ialah untuk menampilkan sebuah isi, biasanya berupa isyarat html,css, javascript dan lain-lain, yang diberikan untuk memudahkan para viewers apabila konten tersebut menyajikan sebuah isyarat atau script dan sanggup juga berupa tutorial. Syntax Highlighter sangat diharapkan biar mempercantik tampilan website atau blog yang kau miliki.
Oke ga usah berlama-lama pribadi saja kita masuk ke tutorial cara membuat Cara Membuat syntax Highlighter
Cara Membuat syntax Highlighter keren di blogger keren
Cara Memasang Syntax Highlighter di Blogger
Jika sebelumnya sudah ada isyarat CSS .post-body pre dan .post-body pre code pada template kalian, maka kalian harus hapus dulu biar tidak bentrok. Lalu tambahkan isyarat berikut ini "SEBELUM / DI ATAS" </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 karakter */
font-size: 12px; /* ukuran karakter */
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
}
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 karakter */
font-size: 12px; /* ukuran karakter */
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 di Blogger
Untuk menggunakannya syntax highlighter di blog dalam isi postingan tinggal dipanggil memakai <pre> dan <code> menyerupai pola berikut.
<pre><code>
<!-- Masukkan semua isyarat CSS, HTML atau Javascript disini -->
</pre></code>
<!-- Masukkan semua isyarat CSS, HTML atau Javascript disini -->
</pre></code>
Jika ingin menulis tag HTML atau Javascript di dalam syntax highlighter maka wajib diparse lebih dulu di Blogcrowds biar tidak menghancurkan tampilan template.scby: igniel.com
Nah begitulah cara membuat syntax Highlighter keren di blog, semoga sanggup bermanfaat dan hingga beetemu di artikel berikutnya