Cara Membuat Syntax Highlighter di Blog Valid AMP

Apa itu Syntax Highlighter ?

Syntax Highlighter merupakan sebuah text editor yang berfungsi menampilkan teks berupa source code atau markup kode dalam sebuah halaman web, agar pengunjung dapat mengetahui dengan jelas perbedaan antara teks biasa dengan source code.

Umumnya Syntax Highlighter memiliki penampilan yang keren dengan tampilan text warna-warni, namun saat ini saya akan membuat dengan tampilan sederhana namun tetap keren.

Biasanya, Syntax Highlighter di peruntukan untuk Blog atau Web yang membahas mengenai kode pemrograman. Contohnya saja pada blog ini.

Hari ini saya akan memberikan sedikit tutorial membuat Syntax Highlighter untuk blog valid AMP. Karena blog yang valid AMP tidak bisa menggunakan javascript, jadi saya hanya menggunakan CSS dalam penerapannya.

Cara Memasang Syntax Highlighter di Blog Valid AMP

Sebelum itu, periksa terlebih dahulu template kamu, dan cari kode CSS .post-body pre dan juga .post-body pre code. Jika ada, hapus kode tersebut agar tidak mengganggu tampilan akhir nantinya.

Selanjutnya, tambahkan kode berikut tepat di bawah <style amp-custom='amp-custom'>


.post-body pre {

  background: #292E34; /* warna background */
  border-left: 5px solid #1d7b8d; /* variasi border kiri */
  padding:8px 10px; overflow:scroll; max-height:200px; margin:10px auto;
}

.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 14px; /* ukuran huruf */
  line-height: 1.5em; /* tinggi spasi */
  font-family:Consolas,Monaco,'Andale Mono',monospace; white-space:nowrap; word-spacing:normal; word-break:normal; -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::-webkit-scrollbar {
  background-color: #cacaca; /* warna scroll*/
  width: 5px;height: 5px;
}

pre::-webkit-scrollbar-thumb {
  background-color: #6f7a88; /* warna background scroll*/
}

Cara Menggunakan Syntax Highlighter di Blog Valid AMP

Penggunaannya sangat mudah, cukup dengan menuliskan kode html berikut <pre><code> dan masukkan semua kode yang ingin ditampilkan pada kolom sytax highlighter. Selanjutnya tutup dengan </pre></code>

setiap kode yang di terapkan ke dalam Syntax Highlighter di haruskan untuk di parse terlebih dahulu melalui link berikut Blogcrowds agar tidak membuat tampilan template menjadi rusak.

Untuk lebih jelasnya, silahkan lihat pada Syntax Highlighter di bawah ini.

<pre><code>

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

Untuk demonya bisa kamu liat pada Blog ini, dan untuk lebih jelasnya bisa cek melalui Codepen saya.

Demo

Ada banyak cara untuk membuat syntax highlihter ini, salah satunya menggunakan javascript. Dan yang saya terapkan pada postingan kali ini, yaitu menggunakan CSS.

Saya memilih menggunakan CSS karena selain Blog AMP tidak bisa menggunakan Javascript, juga karena menggunakan CSS itu lebih ringan agar tidak memberatkan loading Blog.

Pendapatmu :

Langganan Artikel

Berlangganan artikel Gratis langsung via email...

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR