Cara Syntax Highlighter di Blogger - Dipostingan artikel kali ini saya akan membahas tentang Syntax Highlighter. kenapa sih kita membutuhkan Syntax Highlighter ? nah kenapa kita butuh, karena dengan adannya tempat text atau form text yang khusus untuk menempatkan kode script di postingan agar terlihat rapi dan mempercantik postingan kita sehingga dapat menarik perhatian pengunjung agar tidak bosan membacanya.
manfaat dari kita memasang Syntax Highlighter adalah;
1. untuk menempatkan kode pada postingan
2. mempercantik postingan agar penulist tidak bingung atara kode dan text
3. mempermudah sipengunjung untuk copy paste kode
4. dapat menarik minat baca pengunjung karena blog kita tulisannya rapi
5. dan masih banyak lagi beberapa manfaat yang kita dapatkan dari Syntax Highlighter
Mari saya jelaskan cara memasang Syntax Highlighter di blog kita, jika teman teman sering membagikan blog maka Syntax Highlighter ini sangat kita perlukan;
1. silahkan sobat masuk di akun blog sobat, buka di tema lalu edit html
2. Copy paste kode berikut kemudian sisipkan "Sebelum atau di Atas" tulisan </head>
.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
}3. sebelum di save silahkan sobat tambahin menambahkan <style> [kode diatas] </style> dan silahkan sobat save.
Untuk penerapan kode tersebut di postingan silahkan sobat pada tampilan html, karena di html sebelum kode sobat yang mau di share harus menambahkan kode
<pre><code>
<!-- Masukkan kode sobat yang akan di share disini -->
</pre></code>
Baca juga artikel kami yang lain:
untuk artikel ini cukup sekian dulu jika ada tambahan warna adat desain yang lebih menarik maka saya akan posting lagi artikel untuk tambahannya. jika ada salah kata saya minta maaf.teriakasih semoga bermanfaat.