Bloques de código
Agrega bloques de código con resaltado de sintaxis, números de línea, nombres de archivo y resaltado de líneas. Compatible con CodeGroups para ejemplos en múltiples lenguajes.
Usa bloques de código para mostrar comandos, archivos de configuración y fragmentos con resaltado de sintaxis.
Resaltado de sintaxis básico
const greeting = "Hello, Jamdesk!";
console.log(greeting);
Agregar un nombre de archivo
Muestra la ruta del archivo con el atributo title:
export const config = {
name: "My Docs",
theme: "jam"
};Resaltado de líneas
Llama la atención sobre líneas específicas con la sintaxis {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
};
Números de línea
Agrega números de línea con showLineNumbers:
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
Línea de inicio personalizada
Comienza la numeración desde una línea específica:
func processRequest(ctx context.Context) error {
// This is line 42
return nil
}
Características combinadas
Usa múltiples características juntas:
import axios from 'axios';
const client = axios.create({
baseURL: process.env.API_URL,
timeout: 10000,
});
export default client;Code Groups
Muestra el mismo código en múltiples lenguajes:
curl -X POST https://api.example.com/posts \
-H "Authorization: Bearer $API_KEY"Temas disponibles
Configura los temas de resaltado de sintaxis en docs.json:
{
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}
}Los temas más populares incluyen:
- GitHub:
github-dark,github-light,github-dark-default,github-light-default - Temas oscuros:
tokyo-night,one-dark-pro,dracula,nord,vitesse-dark - Temas claros:
vitesse-light,min-light - Catppuccin:
catppuccin-mocha,catppuccin-latte
Tema con variables CSS
Para control total sobre los colores de resaltado de sintaxis, usa el tema de variables CSS:
{
"styling": {
"codeblocks": {
"theme": "css-variables"
}
}
}Luego personaliza los colores en tu custom.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;
}| Variable | Descripción |
|---|---|
--jd-color-text | Color de texto predeterminado |
--jd-color-background | Fondo del bloque de código |
--jd-token-keyword | Palabras clave (if, const, function) |
--jd-token-string | Literales de cadena |
--jd-token-comment | Comentarios |
--jd-token-function | Nombres de función |
--jd-token-constant | Constantes |
--jd-token-parameter | Parámetros de función |
--jd-token-punctuation | Corchetes, comas |
--jd-token-link | URLs y enlaces |
