Visualizador de Markdown online

Como usar

Escreva ou cole o texto na caixa da esquerda. A visualização é atualizada a cada tecla. Use Copiar HTML para levar o resultado para o seu projeto.

Sintaxe suportada

Títulos com # até ######.
**negrito**, *itálico*, ~~riscado~~ e `código`.
Listas com -, * ou 1., com subitens por indentação.
Blocos de código com três crases, citações com >, linhas --- e links [texto](url).

Segurança

Todo HTML digitado é escapado e links com esquemas perigosos, como javascript:, são removidos. Tabelas, imagens e HTML bruto não são suportados.

Como implementar em código

Exemplos prontos para usar no seu projeto.

// npm install marked dompurify
import { marked } from 'marked';
import DOMPurify from 'dompurify';

const html = DOMPurify.sanitize(marked.parse('# Olá\n\nTexto com **negrito**.'));
document.querySelector('#preview').innerHTML = html;

Sempre sanitize o HTML gerado (DOMPurify) antes de usar innerHTML.

# pip install markdown bleach
import markdown
import bleach

html = markdown.markdown("# Olá\n\nTexto com **negrito**.")
seguro = bleach.clean(html, tags=bleach.sanitizer.ALLOWED_TAGS | {"p", "h1", "h2", "h3", "pre", "ul", "ol", "li"})

package main

// go get github.com/yuin/goldmark github.com/microcosm-cc/bluemonday
import (
	"bytes"

	"github.com/microcosm-cc/bluemonday"
	"github.com/yuin/goldmark"
)

func markdownParaHtml(md string) (string, error) {
	var buf bytes.Buffer
	if err := goldmark.Convert([]byte(md), &buf); err != nil {
		return "", err
	}
	return string(bluemonday.UGCPolicy().SanitizeBytes(buf.Bytes())), nil
}

// dart pub add markdown
import 'package:markdown/markdown.dart';

final html = markdownToHtml(
  '# Olá\n\nTexto com **negrito**.',
  extensionSet: ExtensionSet.gitHubFlavored,
);
// No Flutter, o pacote flutter_markdown exibe o texto direto em widgets.

O HTML gerado deve ser sanitizado antes de exibir em uma WebView.

// Maven: org.commonmark:commonmark
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;

public class Md {
    static String paraHtml(String md) {
        Node doc = Parser.builder().build().parse(md);
        // escapeHtml(true) escapa HTML bruto digitado no texto
        return HtmlRenderer.builder().escapeHtml(true).build().render(doc);
    }
}

<?php
// composer require erusev/parsedown
$p = new Parsedown();
$p->setSafeMode(true); // escapa HTML e bloqueia links perigosos
echo $p->text("# Olá\n\nTexto com **negrito**.");

// dotnet add package Markdig
using Markdig;

var pipeline = new MarkdownPipelineBuilder().DisableHtml().Build(); // desativa HTML bruto
string html = Markdown.ToHtml("# Olá\n\nTexto com **negrito**.", pipeline);

Perguntas frequentes

Posso colar HTML no Markdown?

O HTML digitado é mostrado como texto, não executado. É uma proteção contra scripts maliciosos.

Tabelas e imagens funcionam?

Não. Este é um subconjunto: títulos, ênfase, listas, código, links e citações.

O texto é enviado para algum servidor?

Não. O Markdown é processado no seu navegador.

Visualizador de Markdown

Como usar

Sintaxe suportada

Segurança

Como implementar em código

Perguntas frequentes

Veja também

Precisa de um sistema ou app sob medida?