syntax highlighter berwarna hanya dengan css

syantax highlighter berwarna hanya dengan css tanpa ada javascript sama sekali

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat syntax highlighter berwarna hanya dengan css pure tanpa javascript.

syntax highlighter adalah fitur teks editor yang digunakan untuk menyortir berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

dan pada postingan sebelumnya saya juga sudah pernah membagikan cara membuat syntax highlighter berwarna dengan tombol copy code di blog namun menggunakan javascript yang tentunya loading blog akan terbebani.

nah buat kalian yang ingin membuat syntax highlighter berwarna tanpa harus takut loading blog terbebani, kalian bisa menggunakan syntax highlighter yang akan saya bagikan kali ini.

jadi syntax highlighter ini harus di tambahkan class pada setiap kode yang akan kita bagikan nantinya untuk di berikan warna, kita tidak akan menulisnya secara manual, tetapi akan menggunakan tools.

cara kerja tools sama seperti tools parse html pada umumnya, bedanya tools ini selain memparse kode juga akan menambahkan class pada kode tersebut untuk di beri warna. ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Syntax Highlighter Berwarna Hanya Dengan CSS

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-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;hyphens:none}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.post-body pre:before{content:'</>';position:absolute;right:0;color:#c5c8c6;font-size:10px;padding:20px 15px;z-index:2;line-height:35px}
.post-body pre.html:before{content:'.html'}
.post-body pre.css:before{content:'.css'}
.post-body pre.js:before{content:'.js'}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px}
code mark{font-size: 13px;margin: 2px;display: inline-block;}
pre code mark{font-size: 13px;margin: 2px;display: inline-block;}

jika sudah silakan klik simpan, dan jika ingin membuat kode kalian bisa mengunjungi tools hljs parse melalui tombol di atas tadi, nantinya kode kalian akan di parse dan di tambahkan class secara otomatis.

kalian juga bisa menambahkan class pada tag pre untuk memberikan nama jenis kode yang kalian bagikan, lihat contohnya di bawah ini.

<pre class='html'><code>untuk kode jenis html</code></pre>

<pre class='css'><code>untuk kode jenis css</code></pre>

<pre class='js'><code>untuk kode jenis javascript</code></pre>

jika ingin mengtandai sebuah kode kalian bisa menggunakan <mark>kode yang akan di tandai di sini</mark> untuk demonya akan tampak seperti di bawah ini.

<pre><code>
kode kode di tandai kalian yang sudah di parse di sini
</code></pre>

ok jadi sekian cara membuat syntax highlighter berwarna hanya dengan css semoga bermanfaat.

referensi:
https://www.kang-ismet.com/2021/03/auto-manual-syntax-highlighter.html