Cara Membuat Syntax Highlighter pada Blogger, Mudah Banget! - Rohim Ar

Halo geng, Pada postingan kali ini saya akan memberikan cara membuat syntax highligter, simpel dan mudah di peraktekan. 

Sebelumnya untuk pengertian dari syntax highligter itu adalah sebuah fitur penyunting teks, dalama bahasa pemrograman.

Biasanya sering kita lihat pada postingan blogger-blogger sebagai tempat tulisan, skrip atau kode seperti , Html, Css dan Java scrip.

Kalau untuk desain itu  sendiri syntax bermacam-macam dan berbeda template A dan template B  tidak sama, nah disini saya akan membagikan cara membuat syntax highligter.

Cara membuat Syntax Highligter Seperti Template Igniel

1. Sebelumnya bila pada template kau sudah ada kode css pada post-body pre dan post-body code silahkan kamu hapus dulu. 

2. Setelah itu silahkan kamu Copy pada kode CSS dibawah ini, buka Tema edit html, cari kode </style>. kalau sudah Paste di bagian atas kode tersebut.

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. Setelah berhasil disimpan Lalu buka sebuah postingan pada blog kamu, kemudian Copy kode dibawah ini dan masukan kode Html, Css atau java scrip kamu,

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

Nah, bagaimana mudah bukan , Oke disini saya kasih  lagi Syntax tidak kalah keren dari pada punya Igniel.

Cara Membuat Syntax Highlighter Blogger Keren 

1. Buka pada Tema Blogger kamu, edit html silahkan copy dulu kode Css Syntax Highlither dibawah ini.

/* CSS Kotak Script */
.post-body pre{border-left:-1px solid #1abc9c; padding:0;margin:.4em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#0f0f0f;position:relative;width:100%;-moz-tab-size:1;-o-tab-size:1;tab-size:1;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.html:before, .post-body pre.css:before, .post-body pre.javascript:before, .post-body pre.jquery:before {display: block; background-color:#1abc9c; padding:4px 35px; font-weight:600; font-size:16px; font-family:Google Sans, -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; background-repeat:no-repeat; background-size:20px 20px; background-position-x:7px; background-position-y:center;}
.post-body pre.html:before {content:'HTML'; background-image:url("data:image/svg+xml,");}
.post-body pre.css:before {content:'CSS'; background-image:url("data:image/svg+xml,");}
.post-body pre.javascript:before {content:'Javascript'; background-image:url("data:image/svg+xml,");}
.post-body pre.jquery:before {content:'jQuery'; background-image:url("data:image/svg+xml,");}
.post-body pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none} .post-body pre code{line-height:1.5em;display:block;background:none;border:none;color:#ffffff;padding:10px 15px; font-size:14px;white-space:pre;overflow:auto;max-height:250px; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} pre mark,code mark,pre code mark{background-color:#95b2f6 !important;color:#ecf0f1 !important;padding:0px;margin:0px} .post-body code {user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} .post-body code.tutor {color:#f44336; letter-spacing:-0.3px} post-body quote{border-left:5px solid var(--color-main); user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#292E34;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2; tab-size:2; word-break:normal; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none}

2. Cari kode ]]<b:skin> pada template kamu, paste di atas kode tersebut, lalu save.

3. Cara pengunaan buat postingan baru kemudian kode dibawah ini copy.

  <pre class="css"><code> Kode Anda </pre></code>
<pre class="html"><code> Kode Anda
</pre></code>
<pre class="javascript"><code> Kode Anda
</pre></code>

Bagaimana mudah bukan cara membuat syntax higligter pada blogger, semoga pada postingan ini bisa bermanfaat. terimakasih

Related Posts