Blocos de código
Adicione blocos de código com realce de sintaxe, números de linha, nomes de arquivo e destaques. Suporte a CodeGroups para exemplos multilíngues.
Use blocos de código para mostrar comandos, arquivos de configuração e trechos com realce de sintaxe.
Realce de sintaxe básico
const greeting = "Hello, Jamdesk!";
console.log(greeting);
Adicionando um nome de arquivo
Mostre o caminho do arquivo com o atributo title:
src/config.ts
export const config = {
name: "My Docs",
theme: "jam"
};Realce de linhas
Destaque linhas específicas com a sintaxe {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 linha
Adicione números de linha com showLineNumbers:
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n - 1) + fibonacci(n - 2)
Linha inicial personalizada
Comece a numeração em uma linha específica:
func processRequest(ctx context.Context) error {
// This is line 42
return nil
}
Recursos combinados
Use vários recursos em conjunto:
api/client.ts showLineNumbers {3-5}
import axios from 'axios';
const client = axios.create({
baseURL: process.env.API_URL,
timeout: 10000,
});
export default client;Grupos de código
Mostre o mesmo código em várias linguagens:
curl -X POST https://api.example.com/posts \
-H "Authorization: Bearer $API_KEY"Temas disponíveis
Configure os temas de realce de sintaxe em docs.json:
docs.json
{
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}
}Os temas populares incluem:
- GitHub:
github-dark,github-light,github-dark-default,github-light-default - Temas escuros:
tokyo-night,one-dark-pro,dracula,nord,vitesse-dark - Temas claros:
vitesse-light,min-light - Catppuccin:
catppuccin-mocha,catppuccin-latte
Tema de variáveis CSS
Para ter controle completo sobre as cores do realce de sintaxe, use o tema de variáveis CSS:
docs.json
{
"styling": {
"codeblocks": {
"theme": "css-variables"
}
}
}Depois, personalize as cores em seu style.css:
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;
}| Variável | Descrição |
|---|---|
--jd-color-text | Cor de texto padrão |
--jd-color-background | Fundo do bloco de código |
--jd-token-keyword | Palavras-chave (if, const, function) |
--jd-token-string | Literais de string |
--jd-token-comment | Comentários |
--jd-token-function | Nomes de funções |
--jd-token-constant | Constantes |
--jd-token-parameter | Parâmetros de funções |
--jd-token-punctuation | Colchetes, vírgulas |
--jd-token-link | URLs e links |
