I will share how to make a colored syntax highlighter only with pure css without javascript.
The syntax highlighter is a text editor feature that is used to sort various types of programming languages, scripts, or markup, such as HTML, CSS, JavaScript and so on.
So, for those of you who want to make a colorful syntax highlighter without having to be afraid of loading your blog, you can use the syntax highlighter that I will share today.
so this syntax highlighter must be added to the class in every code that we will share later to be given color, we will not write it manually, but will use the hljs parse tool made by www.kang-ismet.com
The way the tool works is the same as the html parse tool in general, the difference is that in addition to parsing the code, this tool will also add a class to the code to color it. ok for those of you who want to make..
Syntax Highlighter Color Only With CSS
please go to blogger select temaand edit htmlcopy the css below and place it above the code ]]></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;}if you have, please click save, and if you want to create code you can visit the hljs parse tool via the button above, later your code will be parsed and added classes automatically.
PRE TAG
You can also add a class to the pre tag to name the type of code you share, see the example below.
<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>if you want to mark a code you can use <mark>the code will be marked here</mark> for the demo it will look like below.
<pre><code>
kode kode di tandai kalian yang sudah di parse di sini
</code></pre>ok, so that's how to make a colored highlighter with only css, hopefully it's useful.
reference:
https://www.kang-ismet.com/2021/03/auto-manual-syntax-highlighter.html
