Blocos de Código

Utilize blocos de código para exibir comandos de terminal, scripts ou snippets de configuração com destaque visual e diferenciação por linguagem.

Exemplos Visuais

O componente suporta estilização específica para diferentes contextos de terminal e linguagens.

Bash (Linux/Mac)

npm install
npm run dev
echo "Build completo!"

PowerShell (Windows)

Get-ChildItem -Path C:\ -Recurse
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
Write-Host "Pronto!"

Markdown

# Titulo

## Subtítulo

- Item 1
- Item 2

```code
Exemplo
```

Como Utilizar

1. Importação

{% import "macros/ui.njk" as ui %}

2. Uso Básico

{{ ui.codeBlock(
  language="bash",
  code="echo 'Olá Mundo'"
) }}

3. Parâmetros Disponíveis

• language (opcional): Define o estilo do cabeçalho do terminal. Padrão: 'bash'.
  • 'bash': Exibe $ bash no topo.
  • 'powershell': Exibe PS> no topo.
  • 'markdown': Exibe # markdown no topo.
• code (obrigatório): O conteúdo de texto/código a ser exibido.

Funcionalidade: Copiar

Todos os blocos de código gerados pela macro ui.codeBlock possuem nativamente a funcionalidade de copiar.

• Automático: Não é necessário configuração adicional.
• Hover: O botão aparece ao passar o mouse sobre o bloco (canto superior direito).
• Feedback: O ícone muda para confirmar a cópia.

Teste aqui

echo "Este código pode ser copiado!"