Code-Blöcke
Füge syntaxhervorgehobene Code-Blöcke mit Zeilennummern, Dateinamen und Hervorhebungen hinzu. Unterstützt CodeGroup für mehrsprachige Beispiele.
Verwende Code-Blöcke, um Befehle, Konfigurationsdateien und Snippets mit Syntaxhervorhebung anzuzeigen.
Grundlegende Syntaxhervorhebung
const greeting = "Hello, Jamdesk!";
console.log(greeting);
Dateinamen hinzufügen
Zeige den Dateipfad mit dem Attribut title an:
export const config = {
name: "My Docs",
theme: "jam"
};Zeilen hervorheben
Lenke mit der Syntax {1,3-5} die Aufmerksamkeit auf bestimmte Zeilen:
// This line is highlighted
const config = {
apiKey: process.env.API_KEY,
baseUrl: 'https://api.example.com', // highlighted
timeout: 5000, // highlighted
retries: 3, // highlighted
};
Zeilennummern
Füge mit showLineNumbers Zeilennummern hinzu:
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
Benutzerdefinierte Startzeile
Beginne die Nummerierung ab einer bestimmten Zeile:
func processRequest(ctx context.Context) error {
// This is line 42
return nil
}
Funktionen kombinieren
Verwende mehrere Funktionen gemeinsam:
import axios from 'axios';
const client = axios.create({
baseURL: process.env.API_URL,
timeout: 10000,
});
export default client;Code-Gruppen
Zeige denselben Code in mehreren Programmiersprachen:
curl -X POST https://api.example.com/posts \
-H "Authorization: Bearer $API_KEY"Verfügbare Themes
Konfiguriere Themes für die Syntaxhervorhebung in docs.json:
{
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}
}Beliebte Themes sind:
- GitHub:
github-dark,github-light,github-dark-default,github-light-default - Dunkle Themes:
tokyo-night,one-dark-pro,dracula,nord,vitesse-dark - Helle Themes:
vitesse-light,min-light - Catppuccin:
catppuccin-mocha,catppuccin-latte
Theme mit CSS-Variablen
Verwende für vollständige Kontrolle über die Farben der Syntaxhervorhebung das Theme mit CSS-Variablen:
{
"styling": {
"codeblocks": {
"theme": "css-variables"
}
}
}Passe anschließend die Farben in deiner style.css an:
:root {
--jd-token-keyword: #ff7b72;
--jd-token-string: #a5d6ff;
--jd-token-comment: #8b949e;
--jd-token-function: #d2a8ff;
--jd-token-constant: #79c0ff;
--jd-token-parameter: #ffa657;
}| Variable | Beschreibung |
|---|---|
--jd-color-text | Standardtextfarbe |
--jd-color-background | Hintergrund des Code-Blocks |
--jd-token-keyword | Schlüsselwörter (if, const, function) |
--jd-token-string | Zeichenfolgenliterale |
--jd-token-comment | Kommentare |
--jd-token-function | Funktionsnamen |
--jd-token-constant | Konstanten |
--jd-token-parameter | Funktionsparameter |
--jd-token-punctuation | Klammern, Kommas |
--jd-token-link | URLs und Links |
