Cara Menciptakan Syntax Highlighter Ibarat Igniel
abomuthemes
Baca Juga
Membuat Syntax Highlighter Terkeren Sepanjang Masa Ala Igniel
- Sign in ke blogger.com
- Pilih Tema --> Edit HTML
- Copy kode css berikut:
- Letakan di atas </style> atau di atas ]]></b:skin>
- Lalu Simpan Tema
/* 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}Cara Menggunakan Syntax Highlighter igniel di Blog
Pengunaanya sangat mudah, saat Anda akan mengetik postingan atau artikel gres caranya yaitu:
- Buat artikel gres atau edit jikalau kalian ingin mengganti gaya syntax highlighternya pada artikel yang sudah ada
- Kemudian masuk ke bab HTML bukan
Compose - Jika codenya css: <pre class="css"><code>Kode Script Disini</code></pre>
- Javascript: <pre class="javascript"><code>Kode Script Disini</code></pre>
- Html: <pre class="html"><code>Kode Script Disini</code></pre>
- Jquery: <pre class="jquery"><code>Kode Script Disini</code></pre>
Hasilnya:
h1 { text-align: center; color: red; }console.log("Saya mencar ilmu Jawascript");<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hay Sayang</title> </head> <body> <p>Ini ialah halaman pertamaku</p> </body> </html>var x = $("#susukntlmanis");Gimana syntax highlighter ala Mbak Igniel? terlihat lebih menarik jadinyakan. Selamat mencoba dan agar bermanfaat.
Sumber https://abomuthemes.blogspot.com/
