Um Code oder Linux Befehle auf der Website darzustellen braucht es einen Syntax-Highlighter. Die meisten sind allerdings nur in Verbindung mit JavaScript - will man nicht unbedingt haben.
Also das ganze mal als reine CSS Lösung versuchen. Das ist cssyn, ein leichtgewichtiger Syntax Highlighter in purem CSS.
Dieser Post stellt gleichzeitig die Dokumentation dar und wird regelmäßig erneuert.
Github:
CSSYN
Aktuelle Version: 0.2-alpha
Last Update: 20-07-2020
C++
<iostream>
int main ()
{
std::cout << "HELLO WORLD!" << std::endl;
}
cssyn ist in reinem CSS geschrieben, dadurch funktioniert das highlighting nicht vollautomatisch, d.h. es ist viel Handarbeit im HTML Code nötig.
Installation
Wer cssyn benutzen will kopiert sich entweder die cssyn.css in seinen /css folder auf dem Webserver und verlinkt sie in der *.html oder kopiert den Inhalt in seine eigene style.css. Damit ist cssyn schon einsatzbereit.
CSS stylesheet verlinken:
HTML
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
Aufbau
Begonnen wird mit der Klasse "label".
Das "Label" erzeugt ein keines Rechteck an der oberen rechten Ecke des Codelocks. Der Inhalt ist beliebig aber sollte den content des Codeblocks gut beschreiben (Sprache, Datei, etc.).
HTML
<span class="label"> HTML </span>
Darauf folgt der Codeblock selber.
Dieser wird mit dem div-container "cssyn" eingeleitet.
HTML
<div id="cssyn"> ... </div>
Innerhalb des div containers erfolgt das eigentliche highlihgting.
Damit die Zeilennummern funktionieren wird der Codeblock zusätzlich mit <pre> eingeleitet und mit </pre> abgeschlossen.
Jede Zeile Code beginnt mit <ln> und endet mit </ln> dami die Zeilen fortlaufend dargestellt werden.
Klassen
Innerhalb des Codeblocks werden die verschiedenen Module des Codes mit Hilfe von Klassen eingefärbt.
Aktuell sind folgende Klassen verfügbar:
- unixshell
- comment
- url
- value
- header-file
- selector
- subselector
- unit
Um den Code oder den Befehl einzufärben werden <span> tags benutz, z.B.:
HTML
<ln><span class="comment"> /* simple comment */ </span></ln>
Das wäre eine komplette Zeile in cssyn.
Das gibt einen simplen Kommentar aus und benutzt die Formatierung für Kommentare.
to do
[ ] - mehr Klassen
[ ] - mehr Color schemes
[ ] - Custom HTML5 Tags (erspart viel Tipperei)
[ ] - Highlighting nach Sprachen sortiert