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:
CSSYN
Aktuelle Version: 0.2-alpha
Last Update: 20-07-2020
C++
<iostream>
int main ()
{
std::cout << "HELLO WORLD!" << std::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 *.html or copy the content into your own style.css. Now cssyn is ready for use.
Link CSS stylesheet:
HTML
<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.).
HTML
<span class="label"> HTML </span>
This is followed by the code block itself.
This is introduced with the div container "cssyn".
HTML
<div id="cssyn"> ... </div>
The actual highlighting takes place within the div container.
In order for the line numbers to work, the code block is also marked with <pre> introduced and with </pre> completed.
Each line of code begins with <ln> and ends with </ln> 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 <span> use tags, e.g.:
HTML
<ln><span class="comment"> /* simple comment */ </span></ln>
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