Ads

Source Code Syntax Highlighter Igniel

"Cara Membuat Syntax Highlighter Seperti Igniel." Kali ini saya akan membagikan cara membuat Syntax khusus menaruh HTML, CSS dan Javascript.

Syntax Highlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman atau bahasa markup.

Cara Membuat Syntax Highlighter Seperti Igniel
Dagruel

Cara Membuat Syntax Highlighter Seperti Igniel

Pertama pasang css dulu di dalam template kalian masing-masing.

pre{background-color:#292e34;border-left:5px solid #da4453;border-radius:unset;padding:0;margin:.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;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}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")}pre.copsour:before{content:'Copyright or Source';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.08,10.86C10.13,10.53 10.24,10.24 10.38,10C10.5,9.74 10.72,9.53 10.97,9.37C11.21,9.22 11.5,9.15 11.88,9.14C12.11,9.15 12.32,9.19 12.5,9.27C12.71,9.36 12.89,9.5 13.03,9.63C13.17,9.78 13.28,9.96 13.37,10.16C13.46,10.36 13.5,10.58 13.5,10.8H15.3C15.28,10.33 15.19,9.9 15,9.5C14.85,9.12 14.62,8.78 14.32,8.5C14,8.22 13.66,8 13.24,7.84C12.82,7.68 12.36,7.61 11.85,7.61C11.2,7.61 10.63,7.72 10.15,7.95C9.67,8.18 9.27,8.5 8.95,8.87C8.63,9.26 8.39,9.71 8.24,10.23C8.09,10.75 8,11.29 8,11.87V12.14C8,12.72 8.08,13.26 8.23,13.78C8.38,14.3 8.62,14.75 8.94,15.13C9.26,15.5 9.66,15.82 10.14,16.04C10.62,16.26 11.19,16.38 11.84,16.38C12.31,16.38 12.75,16.3 13.16,16.15C13.57,16 13.93,15.79 14.24,15.5C14.55,15.25 14.8,14.94 15,14.58C15.16,14.22 15.27,13.84 15.28,13.43H13.5C13.5,13.64 13.43,13.83 13.34,14C13.25,14.19 13.13,14.34 13,14.47C12.83,14.6 12.66,14.7 12.46,14.77C12.27,14.84 12.07,14.86 11.86,14.87C11.5,14.86 11.2,14.79 10.97,14.64C10.72,14.5 10.5,14.27 10.38,14C10.24,13.77 10.13,13.47 10.08,13.14C10.03,12.81 10,12.47 10,12.14V11.87C10,11.5 10.03,11.19 10.08,10.86M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20Z' fill='%231d2129'/%3E%3C/svg%3E")}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")}pre.php:before{content:'Php';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,18.08C5.37,18.08 0,15.36 0,12C0,8.64 5.37,5.92 12,5.92C18.63,5.92 24,8.64 24,12C24,15.36 18.63,18.08 12,18.08M6.81,10.13C7.35,10.13 7.72,10.23 7.9,10.44C8.08,10.64 8.12,11 8.03,11.47C7.93,12 7.74,12.34 7.45,12.56C7.17,12.78 6.74,12.89 6.16,12.89H5.29L5.82,10.13H6.81M3.31,15.68H4.75L5.09,13.93H6.32C6.86,13.93 7.3,13.87 7.65,13.76C8,13.64 8.32,13.45 8.61,13.18C8.85,12.96 9.04,12.72 9.19,12.45C9.34,12.19 9.45,11.89 9.5,11.57C9.66,10.79 9.55,10.18 9.17,9.75C8.78,9.31 8.18,9.1 7.35,9.1H4.59L3.31,15.68M10.56,7.35L9.28,13.93H10.7L11.44,10.16H12.58C12.94,10.16 13.18,10.22 13.29,10.34C13.4,10.46 13.42,10.68 13.36,11L12.79,13.93H14.24L14.83,10.86C14.96,10.24 14.86,9.79 14.56,9.5C14.26,9.23 13.71,9.1 12.91,9.1H11.64L12,7.35H10.56M18,10.13C18.55,10.13 18.91,10.23 19.09,10.44C19.27,10.64 19.31,11 19.22,11.47C19.12,12 18.93,12.34 18.65,12.56C18.36,12.78 17.93,12.89 17.35,12.89H16.5L17,10.13H18M14.5,15.68H15.94L16.28,13.93H17.5C18.05,13.93 18.5,13.87 18.85,13.76C19.2,13.64 19.5,13.45 19.8,13.18C20.04,12.96 20.24,12.72 20.38,12.45C20.53,12.19 20.64,11.89 20.7,11.57C20.85,10.79 20.74,10.18 20.36,9.75C20,9.31 19.37,9.1 18.54,9.1H15.79L14.5,15.68Z' fill='%231d2129'/%3E%3C/svg%3E")}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")}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")}pre.copsour:before,pre.css:before,pre.html:before,pre.javascript:before,pre.jquery:before,pre.php:before{background-color:#e28891;font:500 14px 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Roboto','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif;color:#333;display:block;padding:10px 35px;font-size:16px;background-repeat:no-repeat;background-size:20px 20px;background-position-x:7px;background-position-y:center}code,code.tutor,pre,pre code{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}pre code{display:block;max-height:250px;padding:10px 15px;line-height:1.5em;white-space:pre;overflow:auto;color:#bfbf90;font-size:13px}code,code.tutor{color:#d85555;letter-spacing:-.3px;font-size:1em}

Kedua pasang HTML didalam postingan yang akan dibuat tutorial nya.

<pre class="html"><code>Isi kode yang sudah di-parse</code></pre>
<pre class="css"><code>Isi kode yang sudah di-parse</code></pre>
<pre class="javascript"><code>Isi kode yang sudah di-parse</code></pre>
<pre class="php"><code>Isi kode yang sudah di-parse</code></pre>
<pre class="copsour"><code>Isi kode yang sudah di-parse</code></pre>

<code class="tutor">kode</code> kalo ini ya tampilan nya seperti disamping.

Ganti tulisan "Isi kode yang sudah di-parse" dengan HTML, CSS, JavaScript, atau Php yang sudah diparse lewat http://www.blogcrowds.com/resources/parse_html.php, Demo nya sendiri seperti diatas.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://www.igniel.com/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!