Descrição Overview Descripción
John Gruber criou o Markdown em 2004, em colaboração com Aaron Swartz — o mesmo Aaron Swartz que cofundou o Reddit, desenvolveu o RSS 1.0 e foi um dos maiores ativistas pela abertura da internet. A ideia era resolver um problema que todo escritor técnico conhecia: HTML é ruído visual quando você tenta ler o texto puro. Um artigo com `<p>`, `<strong>` e `<a href=...>` ainda é texto, mas as tags poluem a leitura. Gruber queria um formato que fosse legível como texto simples e que também pudesse ser convertido em HTML sem esforço — e em grande parte conseguiu.
A adoção foi silenciosa mas transformadora. GitHub adotou Markdown para READMEs em 2009 e o formato mudou de status: de pronto, cada repositório open source tinha documentação legível. Stack Overflow, Reddit, Discord, Notion, Obsidian, Jira — em 2024 é mais fácil listar as ferramentas que não suportam Markdown do que as que suportam. O formato virou a lingua franca da documentação técnica. Surgiram dialetos: CommonMark (especificação formal de 2014), GitHub Flavored Markdown (com tabelas e task lists), MDX (Markdown com componentes JSX). Esta ferramenta implementa a sintaxe básica do CommonMark.
O output é um fragmento HTML — sem `<html>`, `<head>` ou `<body>`. Se você vai exibir esse HTML diretamente no browser com conteúdo de terceiros, atenção ao XSS: um link `[clique](javascript:alert(1))` é Markdown válido e gera um `href` executável. Em produção com conteúdo não confiável, sempre passe o HTML gerado por uma biblioteca de sanitização como DOMPurify antes de inserir no DOM.
John Gruber created Markdown in 2004, in collaboration with Aaron Swartz — the same Aaron Swartz who co-founded Reddit, developed RSS 1.0, and was one of the most significant activists for internet openness. The idea was to solve a problem every technical writer knew: HTML is visual noise when you try to read the plain text. An article with `<p>`, `<strong>`, and `<a href=...>` is still text, but the tags pollute the reading. Gruber wanted a format that would be readable as plain text and also convertible to HTML without effort — and he largely succeeded.
Adoption was quiet but transformative. GitHub adopted Markdown for READMEs in 2009 and the format's status changed: from then on, every open-source repository had readable documentation. Stack Overflow, Reddit, Discord, Notion, Obsidian, Jira — in 2024 it is easier to list tools that do not support Markdown than those that do. The format became the lingua franca of technical documentation. Dialects emerged: CommonMark (formal spec from 2014), GitHub Flavored Markdown (with tables and task lists), MDX (Markdown with JSX components). This tool implements the basic CommonMark syntax.
The output is an HTML fragment — no `<html>`, `<head>`, or `<body>`. If you plan to display that HTML directly in the browser with third-party content, watch for XSS: a link like `[click](javascript:alert(1))` is valid Markdown and produces an executable `href`. In production with untrusted content, always pass the generated HTML through a sanitization library like DOMPurify before inserting it into the DOM.
John Gruber creó Markdown en 2004, en colaboración con Aaron Swartz — el mismo Aaron Swartz que cofundó Reddit, desarrolló RSS 1.0 y fue uno de los más importantes activistas por la apertura de internet. La idea era resolver un problema que todo escritor técnico conocía: el HTML es ruido visual cuando intentas leer el texto plano. Un artículo con `<p>`, `<strong>` y `<a href=...>` sigue siendo texto, pero las etiquetas contaminan la lectura. Gruber quería un formato que fuera legible como texto simple y que también pudiera convertirse en HTML sin esfuerzo — y en gran medida lo logró.
La adopción fue silenciosa pero transformadora. GitHub adoptó Markdown para los READMEs en 2009 y el estatus del formato cambió: a partir de entonces, cada repositorio de código abierto tenía documentación legible. Stack Overflow, Reddit, Discord, Notion, Obsidian, Jira — en 2024 es más fácil listar las herramientas que no admiten Markdown que las que sí lo hacen. El formato se convirtió en la lingua franca de la documentación técnica. Surgieron dialectos: CommonMark (especificación formal de 2014), GitHub Flavored Markdown (con tablas y listas de tareas), MDX (Markdown con componentes JSX). Esta herramienta implementa la sintaxis básica de CommonMark.
El output es un fragmento HTML — sin `<html>`, `<head>` ni `<body>`. Si vas a mostrar ese HTML directamente en el navegador con contenido de terceros, presta atención al XSS: un enlace `[clic](javascript:alert(1))` es Markdown válido y genera un `href` ejecutable. En producción con contenido no confiable, pasa siempre el HTML generado por una biblioteca de sanitización como DOMPurify antes de insertarlo en el DOM.
Detalhamento técnico
CommonMark, GitHub Flavored Markdown e MDX: um formato, muitos dialetos
- A especificação original do Markdown (2004) era deliberadamente informal — um arquivo de texto com exemplos, não uma gramática formal. Isso levou a anos de incompatibilidades entre parsers diferentes: texto que funcionava no GitHub não renderizava igual no Reddit ou no Pandoc. Em 2012, Jeff Atwood (fundador do Stack Overflow) e John MacFarlane iniciaram o projeto que virou o CommonMark: uma especificação formal com mais de 600 testes de conformidade.
- O GitHub Flavored Markdown (GFM) é um superconjunto do CommonMark que adiciona tabelas (com colunas delimitadas por `|`), task lists (`- [x]`), strikethrough (`~~texto~~`), menções a usuários (`@nome`) e referências a issues (`#123`). A maioria das ferramentas modernas suporta GFM ou CommonMark como base.
- O MDX surgiu como solução para o ecossistema React: permite escrever componentes JSX diretamente dentro de arquivos Markdown, tornando possível usar `<Chart data={dados} />` ou `<Callout>Atenção</Callout>` dentro de documentação. É usado por Next.js, Docusaurus, Astro e Gatsby.
- Os parsers JavaScript mais usados são: marked.js (simples, rápido, sem dependências), markdown-it (extensível, suporte a plugins), commonmark.js (implementação de referência da especificação CommonMark) e remark (ecossistema unificado de plugins para processar e transformar Markdown como AST).
- O Pandoc é o conversor universal de documentos em linha de comando. Suporta Markdown → HTML, PDF (via LaTeX), DOCX, EPUB e mais de 60 formatos. É a escolha certa quando você precisa de suporte completo à especificação, notas de rodapé, citações bibliográficas ou tabelas complexas que ferramentas simples não cobrem.
Sanitização de HTML: por que o output do Markdown pode ser perigoso
- A maioria dos parsers Markdown permite HTML bruto inline no documento. Um bloco como `<script>alert('xss')</script>` dentro de um arquivo Markdown é tecnicamente válido e será passado diretamente para o output HTML. Se esse output for exibido sem sanitização, o script executa no browser do visitante.
- O ataque mais comum é via links: `[clique aqui](javascript:alert(1))` é Markdown válido e gera um `<a href="javascript:alert(1)">`. Alguns parsers têm opção para bloquear URLs com esquema `javascript:`, mas não é padrão. Verifique a documentação do seu parser.
- DOMPurify é a biblioteca client-side mais usada para sanitizar HTML no browser. Remove scripts, atributos de eventos como `onclick`, URLs `javascript:` e outros vetores de XSS, mas preserva a formatação segura. É leve, rápida e mantida ativamente: `DOMPurify.sanitize(html)`.
- No lado do servidor, as opções são: sanitize-html (Node.js, altamente configurável — permite definir quais tags e atributos são permitidos), Bleach (Python, originalmente desenvolvido pelo Mozilla), HtmlSanitizer (.NET) e HTMLPurifier (PHP). Use sanitização server-side quando o HTML é persistido em banco de dados ou enviado por e-mail.
- Quando você pode pular a sanitização: se o Markdown é escrito exclusivamente por membros autenticados de confiança (autores de um CMS próprio), se você controla todo o conteúdo e ele nunca vem de terceiros, ou se o HTML gerado é usado apenas em contexto interno (PDF, e-mail para lista fechada). Em caso de dúvida, sanitize sempre.
Technical deep dive
CommonMark, GitHub Flavored Markdown, and MDX: one format, many dialects
- The original Markdown specification (2004) was deliberately informal — a text file with examples, not a formal grammar. This led to years of incompatibilities between different parsers: text that worked on GitHub would not render the same way on Reddit or in Pandoc. In 2012, Jeff Atwood (founder of Stack Overflow) and John MacFarlane started the project that became CommonMark: a formal specification with over 600 conformance tests.
- GitHub Flavored Markdown (GFM) is a superset of CommonMark that adds tables (with columns delimited by `|`), task lists (`- [x]`), strikethrough (`~~text~~`), user mentions (`@name`), and issue references (`#123`). Most modern tools support GFM or CommonMark as a baseline.
- MDX emerged as a solution for the React ecosystem: it allows writing JSX components directly inside Markdown files, making it possible to use `<Chart data={data} />` or `<Callout>Warning</Callout>` inside documentation. Used by Next.js, Docusaurus, Astro, and Gatsby.
- The most widely used JavaScript parsers are: marked.js (simple, fast, no dependencies), markdown-it (extensible, plugin support), commonmark.js (reference implementation of the CommonMark spec), and remark (unified plugin ecosystem for processing and transforming Markdown as an AST).
- Pandoc is the universal document converter for the command line. It supports Markdown to HTML, PDF (via LaTeX), DOCX, EPUB, and over 60 formats. It is the right choice when you need full spec support, footnotes, bibliographic citations, or complex tables that simpler tools do not cover.
HTML sanitization: why Markdown output can be dangerous
- Most Markdown parsers allow raw inline HTML in the document. A block like `<script>alert('xss')</script>` inside a Markdown file is technically valid and will be passed directly to the HTML output. If that output is displayed without sanitization, the script executes in the visitor's browser.
- The most common attack vector is through links: `[click here](javascript:alert(1))` is valid Markdown and produces `<a href="javascript:alert(1)">`. Some parsers have an option to block URLs with the `javascript:` scheme, but it is not the default. Check your parser's documentation.
- DOMPurify is the most widely used client-side library for sanitizing HTML in the browser. It removes scripts, event attributes like `onclick`, `javascript:` URLs, and other XSS vectors, while preserving safe formatting. It is lightweight, fast, and actively maintained: `DOMPurify.sanitize(html)`.
- On the server side, the options are: sanitize-html (Node.js, highly configurable — allows defining which tags and attributes are permitted), Bleach (Python, originally developed by Mozilla), HtmlSanitizer (.NET), and HTMLPurifier (PHP). Use server-side sanitization when the HTML is persisted in a database or sent by email.
- When you can skip sanitization: if the Markdown is written exclusively by trusted authenticated members (authors of your own CMS), if you control all the content and it never comes from third parties, or if the generated HTML is used only in an internal context (PDF, email to a closed list). When in doubt, sanitize always.
Detalle técnico
CommonMark, GitHub Flavored Markdown y MDX: un formato, muchos dialectos
- La especificación original de Markdown (2004) era deliberadamente informal: un archivo de texto con ejemplos, no una gramática formal. Eso llevó a años de incompatibilidades entre parsers distintos: texto que funcionaba en GitHub no se renderizaba igual en Reddit o en Pandoc. En 2012, Jeff Atwood (fundador de Stack Overflow) y John MacFarlane iniciaron el proyecto que se convirtió en CommonMark: una especificación formal con más de 600 pruebas de conformidad.
- GitHub Flavored Markdown (GFM) es un superconjunto de CommonMark que añade tablas (con columnas delimitadas por `|`), listas de tareas (`- [x]`), tachado (`~~texto~~`), menciones a usuarios (`@nombre`) y referencias a issues (`#123`). La mayoría de las herramientas modernas admite GFM o CommonMark como base.
- MDX surgió como solución para el ecosistema React: permite escribir componentes JSX directamente dentro de archivos Markdown, lo que hace posible usar `<Chart data={datos} />` o `<Callout>Atención</Callout>` dentro de la documentación. Es usado por Next.js, Docusaurus, Astro y Gatsby.
- Los parsers JavaScript más utilizados son: marked.js (simple, rápido, sin dependencias), markdown-it (extensible, soporte de plugins), commonmark.js (implementación de referencia de la especificación CommonMark) y remark (ecosistema unificado de plugins para procesar y transformar Markdown como AST).
- Pandoc es el conversor universal de documentos en línea de comandos. Admite Markdown → HTML, PDF (vía LaTeX), DOCX, EPUB y más de 60 formatos. Es la opción correcta cuando necesitas soporte completo de la especificación, notas al pie, citas bibliográficas o tablas complejas que las herramientas simples no cubren.
Sanitización de HTML: por qué el output de Markdown puede ser peligroso
- La mayoría de los parsers Markdown permiten HTML crudo inline en el documento. Un bloque como `<script>alert('xss')</script>` dentro de un archivo Markdown es técnicamente válido y se pasará directamente al output HTML. Si ese output se muestra sin sanitizar, el script se ejecuta en el navegador del visitante.
- El vector de ataque más común es a través de enlaces: `[haz clic](javascript:alert(1))` es Markdown válido y genera `<a href="javascript:alert(1)">`. Algunos parsers tienen una opción para bloquear URLs con el esquema `javascript:`, pero no es el comportamiento por defecto. Consulta la documentación de tu parser.
- DOMPurify es la biblioteca del lado del cliente más utilizada para sanitizar HTML en el navegador. Elimina scripts, atributos de eventos como `onclick`, URLs `javascript:` y otros vectores de XSS, pero conserva el formato seguro. Es ligera, rápida y se mantiene activamente: `DOMPurify.sanitize(html)`.
- En el lado del servidor, las opciones son: sanitize-html (Node.js, muy configurable — permite definir qué etiquetas y atributos están permitidos), Bleach (Python, desarrollado originalmente por Mozilla), HtmlSanitizer (.NET) y HTMLPurifier (PHP). Usa sanitización server-side cuando el HTML se persiste en base de datos o se envía por correo electrónico.
- Cuándo puedes saltarte la sanitización: si el Markdown lo escriben exclusivamente miembros autenticados de confianza (autores de tu propio CMS), si controlas todo el contenido y nunca proviene de terceros, o si el HTML generado se usa únicamente en contexto interno (PDF, correo a lista cerrada). En caso de duda, sanitiza siempre.
Exemplo de Código Code Snippets Fragmentos de Código
# Título h1
## Título h2
### Título h3
Parágrafo com **negrito**, *itálico* e `código inline`.
- Item de lista não-ordenada
- Outro item
- Subitem com 2 espaços de indentação
1. Lista numerada
2. Segundo item
[Texto do link](https://exemplo.com)
> Citação em bloco
```javascript
// Bloco de código com realce de sintaxe
const x = 42;
```
---
<!-- Separador horizontal -->import { marked } from 'marked';
import DOMPurify from 'dompurify';
// Configuração do marked
marked.setOptions({
gfm: true, // GitHub Flavored Markdown
breaks: false, // Quebra de linha simples não vira <br>
});
function markdownParaHtmlSeguro(markdown) {
// 1. Converter Markdown para HTML
const htmlBruto = marked.parse(markdown);
// 2. Sanitizar HTML (remove scripts, javascript:, onclick, etc.)
const htmlSeguro = DOMPurify.sanitize(htmlBruto, {
ALLOWED_TAGS: ['p', 'strong', 'em', 'code', 'pre', 'blockquote',
'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4',
'img', 'hr', 'br'],
ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class'],
});
return htmlSeguro;
}
// Uso:
document.getElementById('conteudo').innerHTML =
markdownParaHtmlSeguro(textoDaEntrada);# Heading h1
## Heading h2
### Heading h3
Paragraph with **bold**, *italic*, and `inline code`.
- Unordered list item
- Another item
- Sub-item with 2 spaces of indentation
1. Numbered list
2. Second item
[Link text](https://example.com)
> Block quote
```javascript
// Code block with syntax highlighting
const x = 42;
```
---
<!-- Horizontal separator -->import { marked } from 'marked';
import DOMPurify from 'dompurify';
// marked configuration
marked.setOptions({
gfm: true, // GitHub Flavored Markdown
breaks: false, // Single line break does not become <br>
});
function markdownToSafeHtml(markdown) {
// 1. Convert Markdown to HTML
const rawHtml = marked.parse(markdown);
// 2. Sanitize HTML (removes scripts, javascript:, onclick, etc.)
const safeHtml = DOMPurify.sanitize(rawHtml, {
ALLOWED_TAGS: ['p', 'strong', 'em', 'code', 'pre', 'blockquote',
'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4',
'img', 'hr', 'br'],
ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class'],
});
return safeHtml;
}
// Usage:
document.getElementById('content').innerHTML =
markdownToSafeHtml(inputText);# Título h1
## Título h2
### Título h3
Párrafo con **negrita**, *cursiva* y `código inline`.
- Elemento de lista no ordenada
- Otro elemento
- Subelemento con 2 espacios de sangría
1. Lista numerada
2. Segundo elemento
[Texto del enlace](https://ejemplo.com)
> Cita en bloque
```javascript
// Bloque de código con resaltado de sintaxis
const x = 42;
```
---
<!-- Separador horizontal -->import { marked } from 'marked';
import DOMPurify from 'dompurify';
// Configuración de marked
marked.setOptions({
gfm: true, // GitHub Flavored Markdown
breaks: false, // Un salto de línea simple no se convierte en <br>
});
function markdownAHtmlSeguro(markdown) {
// 1. Convertir Markdown a HTML
const htmlBruto = marked.parse(markdown);
// 2. Sanitizar HTML (elimina scripts, javascript:, onclick, etc.)
const htmlSeguro = DOMPurify.sanitize(htmlBruto, {
ALLOWED_TAGS: ['p', 'strong', 'em', 'code', 'pre', 'blockquote',
'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4',
'img', 'hr', 'br'],
ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class'],
});
return htmlSeguro;
}
// Uso:
document.getElementById('contenido').innerHTML =
markdownAHtmlSeguro(textoDeEntrada);Exemplo Sample Ejemplo
# Guia
- passo **um**
- [site](https://example.com)Perguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.