membuat Syntax Highlighter Blogger Terbaru – Seperti yang kita tahu, Syntax Highlighter adalah fitur tambahan pada website yang berfungsi untuk menampilkan Source code di halaman. Tampilan Syntax Highlihter ini juga dapat di sesuaikan agar sama seperti di tampilan pada Text Editor, sehingga mempermudah membaca code yang di bagikan.
di Blogger, secara default kamu bisa menambahkan Syntax highlighter dengan cara menyisipkan kode di antara tag <pre>...</pre>. Namun tampilan default kurang menarik, dan hanya berbentuk tampilan teks biasa.
Untuk itu Kali ini Emalution akan membahas bagaimana cara membuat Syntax Highlighter di Blogger Terbaru. Berikut tahapannya,
Membuat Syntax Highlighter Blogger
- Login ke Blogger
- Masuk ke Theme > Edit HTML
- Tambahkan kode berikut di atas tag penutup </head>
<style type=\'text/css\'>
/* Syntax Highlighter Style Light - Emalution*/
.post-body pre,#comments pre{background-color:#e9eced;padding:0;margin:0.5em auto;position:relative;white-space:pre;word-wrap:break-word;word-break:normal;overflow:auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;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;border-radius:10px}.post-body pre code,#comments pre code{display:block;color:#555;font-size:17px;max-height:250px;padding:10px 15px;line-height:1.5em;white-space:pre;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre code span{color:#95b2f6;font-style:italic}.post-body pre mark,.post-body code mark,.post-body pre code mark{background-color:#95b2f6;color:#292e34;margin:0;padding:0}.post-body code,.post-body code.tutor{color:#d85555;letter-spacing:-0.3px;font-size:1em;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.post-body pre.html:before,.post-body pre.css:before,.post-body pre.javascript:before,.post-body pre.jquery:before{background-color:#00a8ff;font:500 17px Roboto,sans-serif;color:#fff;display:block;padding:10px 35px;font-size:16px;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,%3Csvg viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z\' fill=\'%231d2129\'/%3E%3C/svg%3E\")}.post-body pre.css:before{content:\"CSS\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z\' fill=\'%231d2129\'/%3E%3C/svg%3E\")}.post-body pre.javascript:before{content:\"Javascript\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z\' fill=\'%231d2129\'/%3E%3C/svg%3E\")}.post-body pre.jquery:before{content:\"jQuery\";background-image:url(\"data:image/svg+xml,%3Csvg viewBox=\'0 0 24 24\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M22.88,10.41C20.77,12.18 17.61,11.9 15.84,9.79C14.06,7.67 14.34,4.5 16.45,2.75L16.96,2.37C15.27,4.19 15.16,7.03 16.8,9C18.43,10.94 21.25,11.32 23.34,9.97L22.88,10.41M21.1,14.5C17.93,17.17 13.2,16.76 10.54,13.58C7.87,10.41 8.29,5.68 11.46,3L12.38,2.36C9.96,5.09 9.84,9.26 12.26,12.14C14.68,15 18.8,15.63 21.91,13.72L21.1,14.5M19.97,19.38C15.53,23.11 8.9,22.53 5.17,18.08C1.45,13.64 2.03,7 6.47,3.29L7.58,2.5C4.07,6.3 3.85,12.23 7.28,16.32C10.71,20.4 16.59,21.22 20.96,18.43L19.97,19.38Z\' fill=\'%231d2129\'/%3E%3C/svg%3E\")}
</style>
4. Untuk penggunaan, kamu bisa memanggil menggunakan tag <pre> dan <code> seperti berikut,
<pre class=\"html\"><code> <!-- Masukkan kode HTML disini --> </code></pre> <pre class=\"css\"><code> <!-- Masukkan kode CSS disini --> </code></pre> <pre class=\"javascript\"><code> <!-- Masukkan kode Javascript disini --> </code></pre> <pre class=\"jquery\"><code> <!-- Masukkan kode JQuery disini --> </code></pre>
Pastikan untuk penerapan kode Pre dilakukan di HTML View bukan di Composer View.
Berikut contoh Tampilan Syntax Highlighternya.
Demikian tutorial kali ini mengenai Cara membuat Syntax Highlighter di Blogger Terbaru. Semoga bermanfaat, dan selamat mencoba. Kalau kamu ada pertanyaan mengenai artikel ini bisa komentar di bawah.