Markdown-Codeblöcke: Codezäune, Hervorhebung und Bildexport
Schreibe verlässliche Markdown-Codeblöcke, wähle eine Sprachangabe, behandle lange Zeilen und exportiere ein gut lesbares Codebild.
Ein Codebild eignet sich für Folien oder Ankündigungen, wenn Leser ein kleines Beispiel sofort erkennen sollen. Ergänze möglichst eine kopierbare Quelle. Öffne für einen einzelnen Ausschnitt Code to Image, oder behalte eingezäunte Codeblöcke im größeren Markdown-Dokument, wenn die Erklärung rundherum wichtig ist.
Ein eingezäunter Block stellt Code als Code dar, statt seine Satzzeichen als normales Markdown auszuwerten. Setze den öffnenden Zaun auf eine eigene Zeile, ergänze eine Sprachangabe wie javascript und schließe ihn nach der letzten Codezeile. Kurze Bezeichner im Satz gehören in Inline-Backticks, mehrere Zeilen in einen Block.
Diese Markdown-Quelle zeigt den Zaun selbst. Der äußere Zaun aus vier Backticks lässt das innere Beispiel mit drei Backticks sichtbar stehen.
```javascript
console.log("Ready");
```
Die Sprachangabe steuert die Hervorhebung, sofern der Renderer sie unterstützt. Sie führt keinen Code aus, installiert keine Abhängigkeiten und bestätigt keine Funktionsfähigkeit. Prüfe bei falschen Farben zuerst Sprachangabe und Thema, bevor du das Programm änderst.
Kopiere das folgende JavaScript in Code to Image, wähle JavaScript und kontrolliere die Vorschau. Das Beispiel speichert drei Farbnamen und baut einen Statustext. Es ist Demonstrationscode, kein Produktbenchmark.
const palette = ["cyan", "amber", "coral"];
function renderStatus(format) {
return `${format}: ${palette.length} colors`;
}
console.log(renderStatus("PNG"));
Das Ergebnis passt in einen Tutorial-Hinweis oder auf eine Folie, die den Zugriff auf die Array-Länge erklärt. Halte Überschrift und Bildunterschrift außerhalb des Programms, damit Erklärung und ausführbarer Quelltext unterscheidbar bleiben.
Eine lange URL, ein tief verschachtelter Ausdruck oder ein breites Objekt können Codebilder unleserlich machen. Frage zuerst, ob das gesamte Beispiel nötig ist. Entferne unabhängige Einrichtungsschritte nur, wenn der Ausschnitt verständlich bleibt, und kennzeichne gekürzten Code.
Verbreitere anschließend die Fläche oder formatiere den Code an syntaktisch sicheren Stellen um. Brich eine Zeichenkette nicht nur für die Karte um. Verlasse dich nicht auf horizontales Scrollen: Ein statisches Bild zeigt keinen Code außerhalb des erfassten Bereichs. Prüfe längste Zeile und schließende Klammer in der heruntergeladenen Datei.
Wähle ein Thema, bei dem Kommentare, Zeichenketten und Satzzeichen in der endgültigen Größe lesbar bleiben. Farbe soll die Erklärung unterstützen, nicht allein ihre Bedeutung tragen. Entferne Tokens, private URLs und personenbezogene Daten vor dem Export; ein nachträglicher Beschnitt lässt die riskante Quelle bestehen.
Veröffentliche den Code als auswählbaren Text oder verlinke das vollständige Beispiel. Alternativtext kann die Aussage erklären; lange Abschriften gehören in den Begleittext. Kontrolliere bei paginierten Dokumenten zusätzlich die Seitenumbrüche, denn ein gutes Bildlayout garantiert kein gutes PDF.
Erstelle ein Codebild. Für Dokumente folgt der Leitfaden zu Codefarben im PDF, für begleitenden Text und Listen der Markdown-Leitfaden.