BLANTERORIONv101
Home Blogger

Membuat Syntax Highlighter Pada Blogger

24 Mei 2022

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.

Pada langkah ini, silahkan masuk ke dalam blogger kalian terlebih dahulu.

2. Kode Css

Disini kita akan salin kodingan css dibawah ini kemudian tempel di atas tag </head>. Jika sudah salin dan tempel, silahkan simpan.
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.

Komentar