In order to display code or Linux commands on the website, you need a syntax highlighter. However, most of them are only in conjunction with JavaScript - you don’t necessarily want to have them.
So try the whole thing as a pure CSS solution. This is cssyn, a lightweight syntax highlighter in pure CSS.
This post also represents the documentation and is updated regularly.

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

1 /* hello world in C++ */ 
2#include <iostream>
3int main()
4{
5std::cout
6class="value">"HELLO WORLD!"
7std::endl;}

cssyn is written in pure CSS, which means that highlighting does not work fully automatically, i.e. a lot of manual work is necessary in the HTML code.

Installation

If you want to use cssyn, either copy the cssyn.css into your /css folder on the web server and link it in the */ or copy the content into your own style.css. Now cssyn is ready for use.

Link CSS stylesheet:

1

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

Structure

We start with the class “label”.
The “Label” creates a rectangle at the top right corner of the codelock. The content is arbitrary but should describe the content of the code block well (language, file, etc.).

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

This is followed by the code block itself.
This is introduced with the div container “cssyn”.

1``` ... ;

The actual highlighting takes place within the div container.
In order for the line numbers to work, the code block is also marked with ; introduced and with ```; completed.
Each line of code begins with ; and ends with ; so that the lines are displayed continuously.

Classes

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

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

To color the code or command use tags, e.g.:

1

<ln><span class="value">&lt;ln&gt;</span><span class="selector">&lt;</span>span <span class="subselector">class="comment"</span><span class="selector">&gt;</span> /* simple comment */ <span class="selector">&lt;</span>/span<span class="selector">&gt;</span><span class="value">&lt;/ln&gt;

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

to do

[ ] - more classes
[ ] - more color schemes
[ ] - Custom HTML5 tags (saves a lot of typing)
[ ] - Highlighting sorted by language