Cara Menciptakan Syntax Highlighter Menyerupai Igniel

abomuthemes

Cara Membuat Syntax Highlighter Terkeren Seperti Igniel - Habis jalan jalan cari tutorial di blognya Mbak Igniel.com nemu yang menarik, syntax highlighter-nya sangat-sangat keren, dan juga gak sengaja baca komentar di blognya Mbak Igniel yang ingin dibuatkan tutorial menciptakan syntax syntax highlighter ibarat yang di gunakan di blog Igniel.com.

Blog Mbak Igniel bagus, manis macam yang punya, dan juga konten-konten yang disajikan selalu fresh, banyak tutorial tutorial yang anti mainstream. Beda halnya dengan saya yang hanya modal "view-source:" kemudian copy dan paste.

Membuat Syntax Highlighter Terkeren Sepanjang Masa Ala Igniel

1. Sign in ke blogger.com
2. Pilih Tema --> Edit HTML
3. Copy kode css berikut:

/* Short Code Igniel */ .post-body pre{border-left:5px solid var(--color-main); 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; 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;hyphen} .post-body pre.html:before, .post-body pre.css:before, .post-body pre.javascript:before, .post-body pre.jquery:before {display: block; background-color:#bde0b9; padding:5px 35px; font-weight:500; 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,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>");} .post-body pre.css:before {content:'CSS'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>");} .post-body pre.javascript:before {content:'Javascript'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>");} .post-body pre.jquery:before {content:'jQuery'; background-image:url("data:image/svg+xml,<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>");} .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:#BFBF90;padding:10px 15px; font-size:12px;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:#292E34 !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}

4. Letakan di atas </style> atau di atas ]]></b:skin>
5. Lalu Simpan Tema

Cara Menggunakan Syntax Highlighter igniel di Blog

Pengunaanya sangat mudah, saat Anda akan mengetik postingan atau artikel gres caranya yaitu:

1. Buat artikel gres atau edit jikalau kalian ingin mengganti gaya syntax highlighternya pada artikel yang sudah ada
2. Kemudian masuk ke bab HTML bukan Compose
3. Jika codenya css: <pre class="css"><code>Kode Script Disini</code></pre>
4. Javascript: <pre class="javascript"><code>Kode Script Disini</code></pre>
5. Html: <pre class="html"><code>Kode Script Disini</code></pre>
6. Jquery: <pre class="jquery"><code>Kode Script Disini</code></pre>

Hasilnya:

h1 { text-align: center; color: red; }

console.log("Saya berguru Jawascript");

<!DOCTYPE html> <html>      <head>           <meta charset="utf-8">           <title>Hay Sayang</title>      </head>      <body>           <p>Ini yakni halaman pertamaku</p>      </body> </html>

var x = $("#susukntlmanis");

Sebelum Kalian memasukan kode, kodenya parse terlebih dahulu.

Gimana syntax highlighter ala Mbak Igniel? terlihat lebih menarik jadinyakan. Selamat mencoba dan biar bermanfaat.