Hai semua, kali ini saya akan membagikan tutorial yang cukup menarik buat kalian. saya akan membuat Syntax Highlighter pada blogger.
Apa Itu Syntax Highlighter?
Syntax Hightlighter adalah sebuah fitur untuk menampilkan kodingan dalam bentuk tulisan, warna teks dan posisi yang sama dengan kodingan yang ingin di tampikan. Agar kita sebagai pembaca blog dapat membacanya dengan mudah.
Nah itu dia teman-teman penjelasan sinkat tentang apa itu Syntax Highlighter. Ayo kita langsung saja ke tutotialnya ya.
1. Masuk ke Blogger.
2. Kode Css
pre {
background-color: #2C333C;
padding:0;
border-left: 5px solid #F39C12;
margin:.4em 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
}
pre code {
font-size: 12px;
color: #BFBF90;
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. Cara Penggunaan
Pada halaman postingan silahkan kalian gunakan markup HTML di bawah ini mengaktifkan Syntax Highlighter pada saat kalian ingin menampilkan source code kalian, seperti : HTML, CSS, JAVASCRIPT, PHP dan markup HTML pada postingan kalian.
<pre><code>
isi kodingan kalian disini
</code></pre>
Oke teman-teman, kurang lebih begitu untuk tutorial kita kali ini tentang Membuat Syntax Highlighter Pada Blogger, terimakasih.
Social Media