Inspirado em markdown

Renderiza markdown padrão — títulos, negrito, links, listas — e adiciona carrossel de palavras, texto colorido e efeito de digitação, sem escrever HTML, CSS ou JS na mão.

~5KB, zero dependências, sem build step. Nome em homenagem à literatura de cordel — a tradição brasileira de amarrar poesia em folheto.

Testar agora Como instalar

Playground

Escreva Cordel, veja renderizar na hora

Edite o texto abaixo — o carrossel de palavras troca sozinho de verdade, exatamente como vai se comportar no seu site.

cordel0 caracteres

Sintaxe

Markdown padrão + quatro recursos próprios

Cordel já entende # título, **negrito**, *itálico*, `código`, [link](url), ![imagem](url), listas, citação e linha horizontal — e adiciona só isso de novo:

🔁 Carrossel de palavras

[palavra1|palavra2|palavra3]

Mínimo de 2 opções separadas por |. Troca em loop com animação vertical. Sempre acessível: leitor de tela ouve todas as opções.

🎨 Texto colorido

{token:texto}

Use um token nomeado (azul, coral, lima...) ou um hex direto, tipo {#ff5a5f:texto}.

✏️ Sublinhado ao entrar na tela

{sublinhado:texto}

Traço que se desenha sozinho quando o elemento aparece na tela. Combine com cor separando por vírgula: {lima,sublinhado:texto}.

⌨️ Efeito de digitação

{digitar:texto}

Digita sozinho, com cursor piscando, quando o elemento entra na tela. Combine com cor: {lima,digitar:texto}. Com um array de frases — {digitar:[frase1|frase2]} — digita, pausa, apaga e passa pra próxima, em loop.

Tokens de cor padrão

Pra caractere literal, escape com barra invertida: \[ \] \{ \}. Especificação completa em SPEC.md.

Instalar

Dois arquivos, sem build

Sem instalação por gerenciador de pacotes — é só apontar pros dois arquivos. Duas formas:

Direto do ar (mais rápido, sempre a versão mais recente): cordel.js e cordel.css — use as URLs completas no <script>/<link>, como no exemplo abaixo.

Baixar e hospedar você mesmo: clique com o botão direito nos dois links acima → "Salvar como" (ou curl -O https://cordel.pangeialabs.com/cordel.js e curl -O https://cordel.pangeialabs.com/cordel.css), copie os arquivos pro seu projeto e troque as URLs abaixo por caminhos locais.

<!-- 1. inclua os dois arquivos -->
<link rel="stylesheet" href="https://cordel.pangeialabs.com/cordel.css">
<script src="https://cordel.pangeialabs.com/cordel.js"></script>

<!-- 2. renderize e ative -->
<h1 id="titulo"></h1>
<script>
  document.getElementById('titulo').innerHTML =
    Cordel.render("Isso é [rápido|fácil|grátis] e {azul:sem enrolação}.");
  Cordel.mount();
</script>