Exemplo Completo de Documento Markdown

← Voltar aos exemplos de Markdown

Bem-vindo ao Raziel.MD! 🚀

Este documento demonstra os principais recursos de renderização disponíveis no aplicativo.

Principais recursos

• ✅ Renderização Markdown: suporte a Markdown com GFM
• 📊 Diagramas Mermaid: fluxogramas, sequências e outros diagramas
• 🎨 Destaque de sintaxe: código em várias linguagens
• 🌙 Temas: modos claro e escuro
• 💾 Uso offline: documentos armazenados localmente

Exemplos de formatação

Listas

Lista não ordenada

• Item 1
• Item 2
  • Subitem 2.1
  • Subitem 2.2
• Item 3

Lista ordenada

1. Primeiro item
2. Segundo item
3. Terceiro item

Código

Código inline: const hello = "world"

Bloco de código JavaScript:

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

Bloco de código Python:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

print(quicksort([3, 6, 8, 10, 1, 2, 1]))

Tabelas

Citações

A simplicidade é o último grau de sofisticação.

• Leonardo da Vinci

Links

Documentação Markdown

Diagramas Mermaid

Fluxograma

graph TD
    A[Upload de arquivos] --> B{Arquivo .md?}
    B -->|Sim| C[Processar conteúdo]
    B -->|Não| D[Ignorar]
    C --> E[Salvar no IndexedDB]
    E --> F[Renderizar na interface]
    F --> G[Visualizar Markdown]

Diagrama de sequência

sequenceDiagram
    participant U as Usuário
    participant A as Aplicativo
    participant DB as IndexedDB

    U->>A: Enviar arquivo
    A->>A: Validar formato
    A->>DB: Salvar arquivo
    DB-->>A: Confirmar
    A-->>U: Exibir sucesso
    U->>A: Selecionar arquivo
    A->>DB: Buscar conteúdo
    DB-->>A: Retornar conteúdo
    A->>A: Renderizar Markdown
    A-->>U: Exibir documento

Diagrama de classes

classDiagram
    class MarkdownFile {
        +number id
        +string path
        +string name
        +string content
        +Date createdAt
        +Date updatedAt
    }

    class IndexedDB {
        +saveFile()
        +getAllFiles()
        +getFileByPath()
        +searchFiles()
        +deleteFile()
    }

    class MarkdownViewer {
        +renderMarkdown()
        +renderMermaid()
        +exportFile()
    }

    IndexedDB --> MarkdownFile
    MarkdownViewer --> MarkdownFile

Gráfico de pizza

pie title Distribuição de funcionalidades
    "Upload de arquivos" : 20
    "Navegação" : 25
    "Renderização" : 30
    "Busca" : 15
    "Suporte offline" : 10

Navegação por links

Wiki-links

Wiki-links permitem criar conexões entre documentos. Clique nos exemplos:

Link simples para este documento

[[./example]]

Link com texto personalizado

[[./example|Voltar para este exemplo]]

Link para seção de outro documento

[[mermaid-examples.md#linha-do-tempo|Ir para a Linha do Tempo]]

Link para seção deste documento

[[#código|Ir para a seção Código]]

Wiki-link dentro de código

O conteúdo dentro do bloco não deve virar link:

[[este/link/nao/deve/virar/html]]

Links internos em Markdown

Links internos abrem na mesma aba. Use Ctrl+Click ou botão do meio para abrir em nova aba.

• Este mesmo documento
• Seção Tabelas
• Seção Citações
• Exemplos avançados de Mermaid

Dica: clique com botão direito em um link para ver ações como abrir, abrir em nova aba e copiar link.

Links externos

Links externos exibem uma confirmação antes de abrir:

• Documentação Markdown
• GitHub
• Vue.js

Recursos avançados

Listas de tarefas

• Importar arquivos
• Criar navegação em árvore
• Renderizar Markdown
• Renderizar Mermaid
• Adicionar busca
• Criar minhas próprias notas
• Organizar uma biblioteca pessoal

Formatação de texto

Negrito, itálico, riscado e código inline.

Negrito e itálico combinados

Separador horizontal

Exemplos de sanitização

Raziel.MD sanitiza conteúdo HTML potencialmente perigoso. Os exemplos abaixo devem ser exibidos sem executar scripts.

<script>alert("XSS")</script>

<img src="x" onerror="alert('XSS via atributo')">

<div onclick="alert('XSS via evento')">Clique aqui</div>

<iframe src="javascript:alert('XSS via iframe')"></iframe>

Conclusão

Este documento demonstra recursos essenciais do Raziel.MD. Crie seus próprios documentos e organize sua base de conhecimento pessoal.

Continue explorando

• Exemplos avançados de Mermaid
• Voltar aos exemplos de Markdown