Índice

1. Recursos Basicos de Markdown
2. Listas, Tarefas e Notas de Rodape
3. Tabelas e Realce de Codigo
4. Alertas estilo GitHub
5. Formulas com KaTeX
6. Diagramas Mermaid
7. Shortcodes do Duckquill
8. Recursos de Extensao HTML
9. Botoes e Navegacao Rapida
10. Recursos de Front Matter no Nivel da Pagina
11. Demo de Backlinks

Este post e a pagina de demo do blog deste site, usada para centralizar e validar recursos de texto rico e formatacao estendida.

Recursos Basicos de Markdown

Estilos de texto: negrito, italico, tachado, codigo inline e ate estilo combinado tudo junto.

• Link interno: Home
• Link externo: Documentacao do Zola
• Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊

Este e um bloco de citacao.

Aqui vai uma citacao aninhada:

Duckquill e excelente para escrita tecnica clara e estruturada.

Listas, Tarefas e Notas de Rodape

• Item normal A
• Item normal B
  • Item aninhado B.1
  • Item aninhado B.2
• Item normal C

1. Escrever conteudo
2. Visualizar localmente
3. Publicar

• Tarefa 1: Habilitar extensoes comuns de Markdown
• Tarefa 2: Adicionar suporte a Mermaid
• Tarefa 3: Refatorar para um post vitrine
• Tarefa 4: Continuar adicionando exemplos praticos do mundo real

Exemplo de nota de rodape¹ e nota com link².

Exemplo de lista de definicao:

Mermaid

Descreva estruturas de grafo com texto e renderize para SVG automaticamente.

KaTeX

Renderizacao de alta performance para formulas matematicas em LaTeX.

Shortcodes do Duckquill

Extensoes de recursos no nivel do tema, como alert, image, video e youtube.

Tabelas e Realce de Codigo

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

Alertas estilo GitHub

Este e um alerta NOTE, usado para contexto de fundo.

Este e um alerta TIP, usado para sugestoes praticas.

Este e um alerta IMPORTANT, usado para enfatizar passos criticos.

Este e um alerta WARNING, usado para destacar problemas potenciais.

Este e um alerta CAUTION, usado para descrever comportamentos de risco.

Formulas com KaTeX

Formula inline: $E = mc^2$.

Formula em bloco:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Diagramas Mermaid

O bloco mermaid a seguir e renderizado como fluxograma:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

Outro exemplo de diagrama de sequencia:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Shortcodes do Duckquill

Shortcode alert (diferente dos alertas do GitHub; aqui e shortcode do tema):

Este e um alerta de shortcode note.

Este e um alerta de shortcode tip.

Este e um alerta de shortcode important.

Este e um alerta de shortcode warning.

Este e um alerta de shortcode caution.

Shortcode de imagem (uso basico):

Shortcode de imagem (mais opcoes):

Este texto demonstra o comportamento de imagem flutuante start, onde a imagem fica no inicio do paragrafo.

Este texto demonstra o comportamento de imagem flutuante end, onde a imagem fica no fim do paragrafo.

Shortcode de video (exemplos basico e autoplay):

Links de shortcode YouTube / Vimeo / Mastodon:

• Link de exemplo do YouTube
• Link de exemplo do Vimeo
• Link de exemplo do Mastodon

(Nota: para evitar ruido no console por embeds de terceiros nesta vitrine, aqui mostramos apenas links.)

Shortcode CRT:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

Recursos de Extensao HTML

Tags inline de HTML comuns tambem funcionam diretamente:

• ASCII
• Ctrl + K
• texto-chave destacado
• isto e um texto com spoiler
• isto e um texto com spoiler solido
• plano antigo plano novo
• esta e uma citacao inline
• demo-output.log: all checks passed
• esta frase esta sublinhada

Este e um exemplo de nota lateral com <small>.

Exemplos de formulario e widgets de interacao:

•  Habilitar Mermaid
•  Habilitar KaTeX
•  Habilitar Backlinks
•  Escuro
•  Claro

Cor de destaque:

Densidade de conteudo:

Composicao de imagem com legenda (figure + figcaption):

Exemplo de barra de progresso (vinculada ao controle range pelo script da pagina):

Botoes e Navegacao Rapida

Recursos de Front Matter no Nivel da Pagina

Alem de featured = true, esta pagina tambem demonstra:

• banner = "banner-feature-en.png": banner do post e miniatura da lista.
• accent_color / accent_color_dark: sobreposicao de cor de destaque por pagina.
• styles = ["css/feature-demo-blog.css"] e scripts = ["js/feature-demo-blog.js"]: estilos e scripts escopados para esta pagina.
• emoji_favicon = "🧪": favicon em emoji para a aba do navegador.

Esta secao e um checklist compacto para validar a renderizacao de configuracoes no nivel da pagina.

Demo de Backlinks

Adicionei um link para este post na pagina about.

Se aparecer um item Backlinks nos botoes de acao rapida, o indice de backlinks internos esta funcionando como esperado.

Se todos os modulos acima renderizarem corretamente, significa que a capacidade de texto rico do blog cobre a maioria dos cenarios comuns de escrita.