bergabung di grup telegram kami

syntax highlighter berwarna hanya dengan css

syntax highlighter berwarna hanya dengan css
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 :

14 komentar



image quote pre code
  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
    1. Iya bantu toolsnya juga mas.
    2. silakan gunakan tools yang sudah di sediakan
  3. Hello brother, I put the code, but when I put the HTML, CSS and JS code, I have a problem with the box, can you help me
    1. make sure the old css is deleted so it doesn't clash
    2. ok thanks bro but how can show this ( double click to selection )
    3. /* pre dblclick */ var preclick = document.getElementsByTagName('pre');for (var i = 0;i < preclick.length;i++){preclick[i].addEventListener('dblclick',function (){var selection = getSelection();var range = document.createRange();range.selectNodeContents(this);selection.removeAllRanges();selection.addRange(range);},false);}
  4. Thank you brother for your help.. I sent you a message yesterday on Facebook and you did not answer me, brother. I also sent you some pictures. I hope you see them and give me your opinion.
    1. copy link and paste your site for example in navigation
    2. I don't understand bro, I mean can I get the codes
  5. Hello brother, I have a question, if possible, how do I add highlight.js codes
    to my site?
    1. follow this tutorial, and use the tools we have provided to parse your code
© 2020 - Wendy Code