kutubuku.myid-Cara Membuat Syntax Highlighter di Blogger Valid AMP / Non AMP-Assalamualaikum wr.wb, hai sobat kutubuku.my.id, ketemu lagi bersama mimin di sini. kali ini mimin akan sedikit membahas mengenai Cara Membuat Syntax Highlighter di Blogger Valid AMP / Non AMP hanya menggunakan CSS, mengapa dengan CSS? simak dulu dong artikel ini sampai habis. oke tanpa berlama lama ini artikelnya.
mungkin beda orang pasti beda pengalaman dan pemikiran namun menurut saya dengan hanya menggunakan CSS saja pasti loading blog kita akan terhambar karena script yang berat, karena kita ketahui ya yang memberatkan blog kita ya script itu.
sebelumnya saya akan sedikit menjelaskan nih tentang syntax highlighter, jadi syntax highlighter ialah pembungkus semua kode yang ada di dalam blog agar terlihat rapih tanpa harus terlihat oleh pengunjung blog kita. biasanya syntax ini berupa kotak yang di dalamnya berisi kode-kode yang digunakan oleh blogger.
jika anda ingin memanggil syntax highlighter ini, anda hanya perlu menggunakan kode "<pre><code> Masukkan Kode Anda Di Sini </code></pre>"
silahkan anda masukkan kode anda ke dalam kode tersebut. biasanya saya copy semua kode yang sudah ada dan masukan ke dalam kode di atas.
jika dilihat memang cukup ribet, tapi tenang saja, saya akan membagikan solusi untuk permasalahan ini. kalian bisa gunakan tools yang sudah saya buat untuk memparse kode yang kalian punya agar blog kalian bisa lebih cepat.
jika kalian menggunakan syntax highlighter ini maka postingan kalian akan berwarna warni seperti dalam websitenya mbak arlina, namun karena mimin ingin kalian berkembang, disini mimin hanya membuat satu kode warna saja dan seterusnya bisa kalian kembangkan kebali oke.
bagi kalian yang memang bergelut di dunia blog/website, saya sarankan tidak ada salahnya untuk menggunaka syntak ini menggunakan CSS agar blog kalian terlihat lebih menarik tanpa harus memberatkan loading dalam blog kalian.
Jika template yang kalian gunakan sudah memakai post-body pre dan post-body pre code, kalian bisa hapus kode tersebut agar tidak error atau berbenturan dengan kode yang kita akan gunakan saat ini.
coba kalian masukkan kode ini di salam style
".post-body pre {
background-color: #292E34; /* warna background */border-left: 5px solid #026061; /* 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
}"
nah jika sudah, kalian bisa simpan temanya. kode ini juga bisa kalian gunakan di template blog AMP ya karena kode ini tidak mengurangi javascript sama sekali.
Mungkin hanya itu yang bisa mimin bagikan untuk saat ini, moga di lain hari mimin bisa membuat artikel yang lebih baik dan lebih bermanfaat lagi untuk kalian.
Jangan lupa untuk bagikan artikel ini jika kalian suka agar teman-teman kalian juga dapat ilmu yang sama.
akhir kata, wassalamualaikum, wr.wb
akhir kata, wassalamualaikum, wr.wb
إرسال تعليق