Cara Membuat Syntax Highlinter Artikel Seperti Igniel di Blogger

Duta Bloger - Halo sobat Duta, kembali lagi dengan admin yang pada kali ini akan membagikan cara membuat syntax highlinter artikel seperti igniel di blogger menggunakan css,  apakah sobat sudah tau apa yang dimaksud dengan Syntax Highlighter?

Syntax Highlighter adalaha editor teks yang digunakan menulis markup kode pada suatu halaman web koding, ini bertujuan untuk memudahkan pembaca memahami keselurahan kodenya. pada tutorial kali ini admin hanya akan membuat satu warna saja dan dibuat menggunakan CSS. jika sobat ingin memasangnya silahkan ikuti tutorialnya di bawah ini.

Membuat Syntax Highlinter Artikel Seperti Igniel Di Blogger

1. Silahkan Sobat duta Login ke Blogger.

2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Kemudian sobat cari kode berikut ini ]]></b:skin>  atau </style> dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Syntax Highlighter Igniel */.post-body pre,#comments pre{background-color:#292e34;border-left:5px solid #008c5f;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}
.post-body pre code,#comments pre code{display:block;color:#bfbf90;font-size:13px;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:#bde0b9;font:500 14px "Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Roboto","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;color:#333333;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")}

4. Selanjutnya Sobat SIMPAN TEMA.

5. Cara pemasangan syntax highlighter di artikel sobat.

<pre class="html"><code>

<!-- Masukkan  kode HTML sobat disini -->

</code></pre>

<pre class="css"><code>

<!-- Masukkan  kode CSS sobat disini -->

</code></pre>

<pre class="javascript"><code>

<!-- Masukkan  kode Javascript sobat disini -->

</code></pre>


<pre class="jquery"><code>

<!-- Masukkan  kode JQuery sobat disini -->

</code></pre>

Jika sobat memasang kode HTML atau JAVASCRIPT di syntax highlighter,kode harus diparse terlebih dahulu

Diatas, itu adalah tutorial Cara Membuat Syntax Highlinter Artikel Seperti Igniel di Blogger Menggunakan CSS. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah sini, Terima kasih.

Pin Share