HTML Code Style Text Generator
Mehrere Tags für Code-, Tasteneingabe- und Programm-Output.
Anwendung & Beispiele
Für mehrzeilige Code-Blöcke kombiniere <pre><code>…</code></pre>. <pre> erhält Zeilenumbrüche, <code> liefert die semantische Auszeichnung.
FAQ
Wie kombiniere ich <pre> und <code>?
<pre><code>…</code></pre> ist Standard für mehrzeilige Code-Blöcke. <pre> erhält Whitespace und Zeilenumbrüche, <code> liefert die semantische Auszeichnung.
Wie färbe ich Code (Syntax-Highlighting)?
HTML allein bietet keine Färbung — dazu brauchst du eine JS-Bibliothek wie Prism.js, highlight.js oder Shiki. Diese parsen den Code und wrappen Tokens in <span>-Elemente mit Klassen.
Was sind <kbd>, <samp>, <var>?
<kbd> für Tasteneingaben (z.B. Ctrl+C), <samp> für Programm-Ausgaben (z.B. Konsolen-Text), <var> für Variablen in Mathe oder Code (z.B. x).
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.