CSSYN

A simple syntax highlighter based on HTML and CSS without JavaScript
Log | Files | Refs | README

README.md (1358B)

      1 CSSYN - A syntax highlighter in pure HTML and CSS without JS
      2 ------------------------------------------------------------
      3 
      4 I don't want any JS on my website but I want syntax highlighting. 
      5 It is a bit more work to do by hand but it is totally woth it. 
      6 
      7 Live:
      8 https://www.nerdbude.com/cssyn.html
      9 
     10 ------------------------------------------------------------
     11 
     12 0x01 - INSTALLATION:
     13 [-] copy the cssyn.css to your /css folder 
     14 [-] link the cssyn.css in your HTML files with:
     15     <link rel="stylesheet" type="text/css" href="/cssyn.css"> 
     16 
     17 0x02 - CLASSES:
     18 The highlighting itself is defined in classes:
     19 
     20 * .unixshell
     21 * .comment
     22 * .url
     23 * .header-file
     24 * .selector
     25 * .value
     26 * .unit 
     27 
     28 0x03 - HOW TO USE:
     29 Before you highlight the code you can set a small label for the codebox.
     30 Just use <span class="label">C++</span> and the language you choose will 
     31 appear in a small flag on top of the box. 
     32 
     33 You can use the syntax-highlighting within the <div id="cssyn"> </div> tag.
     34 This contain the Codeblock.
     35 To define the linenumbers you can use the <ln> tag. 
     36 Every line between these text within the cssyn div container get a line number.
     37 <ln> </ln>
     38 
     39 Now you can highlight the code with a <span> tag and a class name:
     40 <span class="selector"> int </span>
     41 
     42 example:
     43 
     44 <span class="label"> C++ </span>
     45 <div id="cssyn">
     46 <ln><span class"coment"> HELLO WORLD </span></ln>
     47 </div>