Uma sintaxe mínima pra pedir carrossel de palavras e texto colorido direto no conteúdo — 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.
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.
Só dois recursos, de propósito
Cordel não tenta ser um markdown completo — ele cuida só desses dois efeitos. Combine com o parser de markdown que você já usa pro resto.
🔁 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}.
Pra caractere literal, escape com barra invertida: \[ \]
\{ \}. Especificação completa em
SPEC.md.
Dois arquivos, sem build
Copie cordel.js e cordel.css pro seu projeto
(ou clone o repositório inteiro) — não tem passo de build, nem dependência de terceiros.
<!-- 1. inclua os dois arquivos --> <link rel="stylesheet" href="cordel.css"> <script src="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>