commit af27c4452074c05314e72851ab96f55e2e9a2556 Author: 0x17 <post@nerdbude.com> Date: Wed, 29 Nov 2023 10:07:26 +0000 create README.md Diffstat:
| A | README.md | | | 47 | +++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 47 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md @@ -0,0 +1,47 @@ +CSSYN - A syntax highlighter in pure HTML and CSS without JS +------------------------------------------------------------ + +I don't want any JS on my website but I want syntax highlighting. +It is a bit more work to do by hand but it is totally woth it. + +Live: +https://www.nerdbude.com/cssyn.html + +------------------------------------------------------------ + +0x01 - INSTALLATION: +[-] copy the cssyn.css to your /css folder +[-] link the cssyn.css in your HTML files with: + <link rel="stylesheet" type="text/css" href="/cssyn.css"> + +0x02 - CLASSES: +The highlighting itself is defined in classes: + +* .unixshell +* .comment +* .url +* .header-file +* .selector +* .value +* .unit + +0x03 - HOW TO USE: +Before you highlight the code you can set a small label for the codebox. +Just use <span class="label">C++</span> and the language you choose will +appear in a small flag on top of the box. + +You can use the syntax-highlighting within the <div id="cssyn"> </div> tag. +This contain the Codeblock. +To define the linenumbers you can use the <ln> tag. +Every line between these text within the cssyn div container get a line number. +<ln> </ln> + +Now you can highlight the code with a <span> tag and a class name: +<span class="selector"> int </span> + +example: + +<span class="label"> C++ </span> +<div id="cssyn"> +<ln><span class"coment"> HELLO WORLD </span></ln> +</div>