[ code. keyboards. terminals. cyber. ]



To display code or Linux commands on the website you need a syntax highlighter. However, most are only in conjunction with JavaScript - you do not necessarily want to have.
So try the whole thing as a pure CSS solution. This is cssyn, a lightweight syntax highlighter in pure CSS.
This post is also the documentation and will be updated regularly.

Github: CSSYN
Aktuelle Version: 0.2-alpha
Last Update: 20-07-2020

 /* hello world in C++ */ 
#include  <iostream>

int main ()
   std::cout << "HELLO WORLD!" << std::endl;

cssyn is written in pure CSS, thus highlighting does not work fully automatically, i.e. a lot of manual work is needed in the HTML code.


Who wants to use cssyn either copies the cssyn.css in his /css folder on the webserver and links it in the *.html or copies the content in his own style.css. With that, cssyn is ready to go.

Link the CCS stylesheet:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">


Starting with the class "label".
The "label" creates a no rectangle at the top right corner of the codelock. The content is arbitrary but should describe the content of the codeblock well (language, file, etc.).

<span class="label"> HTML </span>

This is followed by the code block itself.
This is introduced with the div-container "cssyn".

<div id="cssyn"> ... </div>

Inside the div container the actual highlihgting takes place.
In order for the line numbers to work, the code block is also introduced with <pre> and ended with </pre>.
Each line of code starts with <ln> and ends with </ln> so that the lines are displayed continuously.


Within the code block, the different modules of the code are colored using classes.
Currently the following classes are available:

- unixshell
- comment
- url
- value
- header-file
- selector
- subselector
- unit

To colorize the code or command <span> tags are used, e.g.:

<ln><span class="comment"> /* simple comment */ </span></ln>

This would be a complete line in cssyn.
This outputs a simple comment and uses the formatting for comments.

to do

[ ] - more classes
[ ] - more color schemes
[ ] - Custom HTML5 Tags
[ ] - Highlighting different languages