Jamdesk Documentation logo

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:

src/config.ts
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:

api/client.ts showLineNumbers {3-5}
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:

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:

docs.json
{
  "styling": {
    "codeblocks": {
      "theme": "css-variables"
    }
  }
}

Passe anschließend die Farben in deiner style.css an:

style.css
: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;
}
VariableBeschreibung
--jd-color-textStandardtextfarbe
--jd-color-backgroundHintergrund des Code-Blocks
--jd-token-keywordSchlüsselwörter (if, const, function)
--jd-token-stringZeichenfolgenliterale
--jd-token-commentKommentare
--jd-token-functionFunktionsnamen
--jd-token-constantKonstanten
--jd-token-parameterFunktionsparameter
--jd-token-punctuationKlammern, Kommas
--jd-token-linkURLs und Links

Wie geht es weiter?

SEO-Optimierung

Auffindbarkeit und Metadaten verbessern

Frontmatter

Titel, Beschreibungen und SEO-Felder definieren