Blocchi di codice
Aggiungi blocchi di codice con evidenziazione della sintassi, numeri di riga, nomi di file ed evidenziazione. Supporta CodeGroup per esempi in più linguaggi.
Usa i blocchi di codice per mostrare comandi, file di configurazione e snippet con evidenziazione della sintassi.
Evidenziazione di base della sintassi
const greeting = "Hello, Jamdesk!";
console.log(greeting);
Aggiungere un nome file
Mostra il percorso del file con l'attributo title:
export const config = {
name: "My Docs",
theme: "jam"
};Evidenziazione delle righe
Richiama l'attenzione su righe specifiche con la sintassi {1,3-5}:
// This line is highlighted
const config = {
apiKey: process.env.API_KEY,
baseUrl: 'https://api.example.com', // highlighted
timeout: 5000, // highlighted
retries: 3, // highlighted
};
Numeri di riga
Aggiungi i numeri di riga con showLineNumbers:
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
Riga iniziale personalizzata
Inizia la numerazione da una riga specifica:
func processRequest(ctx context.Context) error {
// This is line 42
return nil
}
Funzionalità combinate
Usa più funzionalità insieme:
import axios from 'axios';
const client = axios.create({
baseURL: process.env.API_URL,
timeout: 10000,
});
export default client;Gruppi di codice
Mostra lo stesso codice in più linguaggi:
curl -X POST https://api.example.com/posts \
-H "Authorization: Bearer $API_KEY"Temi disponibili
Configura i temi per l'evidenziazione della sintassi in docs.json:
{
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}
}I temi più diffusi includono:
- GitHub:
github-dark,github-light,github-dark-default,github-light-default - Temi scuri:
tokyo-night,one-dark-pro,dracula,nord,vitesse-dark - Temi chiari:
vitesse-light,min-light - Catppuccin:
catppuccin-mocha,catppuccin-latte
Tema con variabili CSS
Per il controllo completo sui colori dell'evidenziazione della sintassi, usa il tema CSS Variables:
{
"styling": {
"codeblocks": {
"theme": "css-variables"
}
}
}Poi personalizza i colori nel tuo 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;
}| Variabile | Descrizione |
|---|---|
--jd-color-text | Colore predefinito del testo |
--jd-color-background | Sfondo del blocco di codice |
--jd-token-keyword | Parole chiave (if, const, function) |
--jd-token-string | Stringhe letterali |
--jd-token-comment | Commenti |
--jd-token-function | Nomi delle funzioni |
--jd-token-constant | Costanti |
--jd-token-parameter | Parametri delle funzioni |
--jd-token-punctuation | Parentesi, virgole |
--jd-token-link | URL e link |
