Code block
Das Code block ist vor allem für Website-Betreiber:innen nützlich, die technische Dokumentationen präsentieren möchten und dafür Syntax highlightning (dt.: Syntax-Hervorhebung) betreiben möchten. Denn das Element ermöglicht allen Anwender:innen in toujou einen manuell hinterlegten Code-Schnipsel so anzuzeigen, dass er im Entwickler-Design (z.B. schwarzer Hintergrund) angelehnt ist. So wird eine technische Dokumentation authentischer.
Beispielansicht Anleitung Hinweise, Tipps & Tricks
Beispielansicht
const test = "This is a variable";
function add (a,b) {
return a + b;
}
javascript
Anleitung
Code block erstellen
- Nachdem Sie im Inhaltsbereich Ihrer Seite auf + Inhalt geklickt haben, öffnet sich das Fenster zur Auswahl des Elements. Wählen Sie den Reiter Widgets und anschließend Code block.
Code-Sprache wählen (optional)
- Wählen Sie die gewünschte Code-Sprache aus den vielfältigen Optionen aus. Klicken Sie hierfür im Reiter Content auf das Dropdown-Menü unter Code-Sprache. Beispielhaft stehen CSS, HTML, JSON und andere zur Verfügung.
- Ist eine Sprache ausgewählt, wird diese auf der Webseite im Code Block am oberen rechten Rand angezeigt.
Code eingeben
- Im Reiter Content tragen Sie im Feld Text den gewünschten Code ein und speichern Sie die Einstellungen.
- Eine Überprüfung des eingegebenen Codes findet nicht statt. Achten Sie daher auf die korrekte Schreibweise für Ihre Dokumentation.
Hinweise, Tipps & Tricks
Besonderheiten: Das Element Code Block wird standardmäßig im schwarzen Hintergrund ausgegeben. Für eine andere Hintergrundfarbe kontaktieren Sie bitte unser Service-Team. Beachten Sie zudem, dass im Textfeld keine automatische Prüfung des eingegebenen Codes erfolgt und dieser keine Auswirkungen auf die Seite hat. Das Element dient lediglich zur Veranschaulichung des Code-Schnipsels im Sinne der Syntax-Hervorhebung.
Verknüpfte Tutorials
Tutorials, die mit diesem Element in Verbindung stehen.