join grup whatsapp Join

syntax highlighter berwarna hanya dengan css

cara membuat syantax highlighter berwarna hanya dengan CSS pure tanpa ada sentuhan javascript sama sekali yang tentunya akan jauh lebih ringan.
cara membuat syntax highlighter berwarna hanya dengan css pure tanpa javascript

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 hljs parse yang di buat oleh www.kang-ismet.com

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 pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>

.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

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

3 komentar

  1. untuk pemasangan di Median Ui itu harus diganti dulu kode Syntax bawaannya? atau cukup ikuti langkah2 spt di postingan?
    1. Copy yg hljs aja biar tidak bentrok
  2. tools nya juga dong bang bagi sc nya


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english