Demonstração do Markdown Especial 🚀

Este artigo demonstra todas as funcionalidades do nosso sistema de markdown especial que suporta HTML, blocos de código com syntax highlighting, e formatação avançada.

Títulos com Diferentes Níveis

H3 - Título de Nível 3

H4 - Título de Nível 4

H5 - Título de Nível 5

H6 - Título de Nível 6

Formatação de Texto

Negrito e Itálico

Texto em negrito usando texto
Texto em itálico usando texto
Texto em negrito e itálico combinando ambos
Texto em negrito usando texto
Texto em itálico usando texto

Código Inline

Código inline: logger("log", "Hello World!")
Variável: const nome = "João"
Função: function soma(a, b) { return a + b; }

Blocos de Código com Syntax Highlighting

JavaScript

javascript

// Função para calcular o fatorial
function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

// Exemplo de uso
logger("log", factorial(5)); // 120

// Arrow function com template literals
const saudacao = (nome) => `Olá, ${nome}! Como você está?`;
logger("log", saudacao("Maria"));

Python

python

# Função para verificar se um número é primo
def is_prime(n):
    if n < 2:
        return False
    for i in range(2, int(n ** 0.5) + 1):
        if n % i == 0:
            return False
    return True

# Lista de números para testar
numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10]
primes = [n for n in numbers if is_prime(n)]
print(f"Números primos: {primes}")  # [2, 3, 5, 7]

HTML

html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página de Exemplo</title>
</head>
<body>
    <header>
        <h1>Bem-vindo ao nosso site</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#sobre">Sobre</a></li>
                <li><a href="#contato">Contato</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Conteúdo Principal</h2>
            <p>Este é um exemplo de <strong>HTML</strong> bem estruturado.</p>
        </section>
    </main>
</body>
</html>

CSS

css

/* Estilos para um card moderno */
.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.card-content {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* Responsividade */
@media (max-width: 768px) {
  .card {
    padding: 1.5rem;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
}

JSON

json

{
  "usuario": {
    "id": 12345,
    "nome": "João Silva",
    "email": "joao.silva@email.com",
    "ativo": true,
    "preferencias": {
      "tema": "escuro",
      "idioma": "pt-BR",
      "notificacoes": {
        "email": true,
        "push": false,
        "sms": true
      }
    },
    "tags": ["desenvolvedor", "frontend", "react"]
  },
  "ultimo_acesso": "2024-01-15T10:30:00Z"
}

Citações

Esta é uma citação em markdown. Pode conter formatação e estilos.

"A simplicidade é a sofisticação definitiva." - Leonardo da Vinci

Links e Referências

Tabelas (HTML)

Nome

Idade

Profissão

João

Desenvolvedor

Maria

Designer

Pedro

Analista

Conclusão

Este artigo demonstrou todas as funcionalidades do nosso sistema de markdown especial:

✅ Títulos com diferentes níveis (H1-H6)

✅ Formatação de texto (negrito, itálico, código inline)

✅ Blocos de código com syntax highlighting

✅ Mistura de HTML e Markdown

✅ Listas ordenadas e não ordenadas

✅ Citações e links

✅ Tabelas em HTML

O sistema é flexível e permite criar conteúdo rico e bem formatado! 🎉

Markdown Teste: HTML e Código