BBCode (Bulletin Board Code) é uma linguagem de marcação leve usada em fóruns e murais para formatar mensagens. As tags ficam entre colchetes, como [b]negrito[/b] ou [url]link[/url], e são convertidas em HTML seguro na hora de exibir.

Como o BBCode funciona?

Você marca o texto com tags entre colchetes, uma de abertura e outra de fechamento com barra: [i]texto[/i]. Na hora de exibir, o fórum troca essas tags por HTML seguro, sem deixar o usuário escrever HTML direto. Ao combinar tags, feche na ordem inversa: [b][i]texto[/i][/b]. Uma tag que não foi aberta ou que o sistema não conhece aparece como texto comum.

Quais tags de BBCode este editor suporta?

São 34 tags no total: [b], [i], [u], [s], [color], [size], [url], [img], [quote], [code], [h1]–[h6], [list] e [table] com suas células, além de [strike], [spoiler], [noparse] e [olist], o que cobre a ajuda de formatação do Steam. Tags fora dessa lista, como [youtube], [font] e [align], aparecem como texto em vez de sumir.

Funciona para perfis do osu! e páginas do ArtFight?

Sim. Você cola o BBCode da sua descrição do osu! ou da sua página do ArtFight e confere a pré-visualização ao vivo antes de salvar. Lembre que cada plataforma suporta um conjunto próprio de tags, então use a pré-visualização para validar a formatação.

Esta ferramenta tem pré-visualização ao vivo?

Tem. Conforme você digita ou cola o BBCode no editor, o painel de pré-visualização atualiza na hora, mostrando exatamente como o texto formatado vai ficar antes de publicar.

Dá para converter BBCode em HTML?

Sim. No painel da direita, alterne de "Pré-visualização" para "HTML" para copiar o código ou baixá-lo como .html. O arquivo baixado é uma página completa, com codificação UTF-8 e o estilo mínimo para spoilers e tabelas, e abre em qualquer navegador. Só links http/https são mantidos, e eles saem com rel="nofollow" abrindo em nova aba; scripts e atributos on* são removidos.

Meu BBCode é enviado para algum servidor?

Não. Toda a interpretação e renderização acontecem inteiramente no seu navegador, então o seu texto nunca sai do dispositivo e nada é enviado.

Como mudar a cor do texto no BBCode?

Use [color=red]texto[/color] com o nome de uma cor em inglês (red, green, purple…) ou [color=#1e90ff]texto[/color] com um código hexadecimal de 3 ou 6 dígitos. O botão de cor da barra abre o seletor do sistema e já insere o código hexadecimal. Se o valor for inválido, o texto aparece sem cor, mas o restante do post continua intacto.

Como redimensionar uma imagem com BBCode?

Informe largura e altura em pixels dentro da tag: [img width=400 height=250]https://example.com/imagem.jpg[/img]. Se passar só a largura, a altura acompanha a proporção. A imagem é carregada do endereço original, que precisa começar com http ou https; a ferramenta não hospeda arquivos, então suba a imagem antes em algum serviço.

Como montar uma tabela em BBCode?

A estrutura é [table] › [tr] para cada linha › [th] para cabeçalho ou [td] para dado: [table][tr][th]Item[/th][th]Preço[/th][/tr][tr][td]Café[/td][td]8,50[/td][/tr][/table]. As células aceitam colspan e rowspan, e [table noborder=1] tira as bordas como no Steam. O botão de tabela da barra insere um modelo 2×2 para você preencher.

O BBCode do Godot é igual ao dos fóruns?

Não exatamente. O RichTextLabel do Godot usa a mesma sintaxe de colchetes, mas tem um conjunto próprio: além de [b], [color] e [img], traz tags de animação como [wave], [shake] e [pulse], que nenhum fórum entende. Esta ferramenta mostra o BBCode de fórum, então essas tags do Godot ficam visíveis como texto.

Visualizador BBCode

Editor de BBCode online: insira tags pela barra de ferramentas, veja a pré-visualização ao vivo e exporte em HTML. Tudo no navegador, sem cadastro.

Cole o BBCode ou abra um arquivo .txt e a pré-visualização atualiza enquanto você digita. A barra de ferramentas e atalhos como Ctrl+B e Ctrl+K envolvem a seleção em tags. São 34 tags, incluindo [spoiler], [noparse] e [olist] do Steam. Na visualização HTML você copia ou baixa o código; o BBCode pode ser salvo em .txt. Tudo roda no navegador, sem upload.

Editor BBCode

303

[h2]Patch notes[/h2]
[b]Bold[/b] [i]Italic[/i] [u]Underline[/u] [strike]Strike[/strike]

[url=https://example.com]Link[/url]

[quote=Author]This is a quote[/quote]

[list]
[*]First item
[*][color=#e11d48]Red item[/color]
[/list]

[spoiler]Hidden ending[/spoiler]

[code]console.log('Hello World')[/code]

[h2]Patch notes[/h2]
[b]Bold[/b] [i]Italic[/i] [u]Underline[/u] [strike]Strike[/strike]

[url=https://example.com]Link[/url]

[quote=Author]This is a quote[/quote]

[list]
[*]First item
[*][color=#e11d48]Red item[/color]
[/list]

[spoiler]Hidden ending[/spoiler]

[code]console.log('Hello World')[/code]

Visualização ao vivo

Patch notes

Bold Italic Underline ~~Strike~~

Link

AuthorThis is a quote

First item
Red item

Hidden ending

console.log('Hello World')

Talvez você também precise

Visualizador Markdown

Visualize e edite Markdown com visualização ao vivo.

Abrir ferramenta

Visualizador HTML

Abra um arquivo .html ou cole o código e veja a página renderizada ao lado.

Abrir ferramenta

Markdown para JSON

Converta Markdown AST, tabelas e metadados iniciais para JSON.

Abrir ferramenta

HTML para JSON

Converter estrutura HTML em árvore JSON.

Abrir ferramenta

Como usar o Visualizador BBCode

1
Cole o seu BBCode
Digite ou cole o código no editor à esquerda, por exemplo [b]texto em negrito[/b] ou [url=https://example.com]link[/url], ou abra um arquivo .txt ou .bbcode salvo no seu computador. O botão do frasco carrega um exemplo pronto.
2
Acompanhe a pré-visualização ao vivo
O painel da direita atualiza em tempo real e mostra exatamente como o texto formatado vai aparecer no fórum, no osu! ou no ArtFight.
3
Insira e confira as tags
Selecione o texto e use a barra de ferramentas ou os atalhos (Ctrl+B negrito, Ctrl+K link, Ctrl+Shift+8 lista com marcadores, Ctrl+Shift+7 lista numerada), conferindo na pré-visualização até ficar como você quer.
4
Copie ou exporte o resultado
Copie o BBCode para o fórum ou perfil, mude para a visualização HTML para copiar ou baixar o código, ou salve em .txt.

Referências

Wikipédia — BBCode
Visão geral do BBCode: história, tags mais comuns e como os fóruns interpretam essa linguagem de marcação leve.
phpBB — Guia de BBCode
Documentação oficial do phpBB com as tags padrão de BBCode, como negrito, itálico, links, imagens, citações e blocos de código.
Comunidade Steam — Ajuda de formatação de texto
Página oficial do Steam com as tags BBCode aceitas em análises e discussões, incluindo [spoiler], [noparse], [olist] e as opções de tabela.
Wikipédia em português — BBCode
Verbete em português sobre a origem do BBCode e as tags mais usadas em fóruns.
Documentação do Godot — BBCode no RichTextLabel
O dialeto de BBCode do Godot, com tags de animação como [wave] e [shake] que os fóruns não têm.

Ferramentas Relacionadas

Visualizador Markdown

Veja a formatação Markdown em tempo real, outra linguagem de marcação leve usada em posts e documentação.

Visualizador HTML

Renderize e visualize HTML puro, útil para conferir no que o seu BBCode é convertido.

Minificador de HTML

Comprima o código HTML removendo espaços e comentários antes de publicar.

Comparar Textos e Diferenças

Compare dois blocos de texto ou de código lado a lado e veja o que mudou.

Perguntas Frequentes

O que é BBCode?: BBCode (Bulletin Board Code) é uma linguagem de marcação leve usada em fóruns e murais para formatar mensagens. As tags ficam entre colchetes, como [b]negrito[/b] ou [url]link[/url], e são convertidas em HTML seguro na hora de exibir.
Como o BBCode funciona?: Você marca o texto com tags entre colchetes, uma de abertura e outra de fechamento com barra: [i]texto[/i]. Na hora de exibir, o fórum troca essas tags por HTML seguro, sem deixar o usuário escrever HTML direto. Ao combinar tags, feche na ordem inversa: [b][i]texto[/i][/b]. Uma tag que não foi aberta ou que o sistema não conhece aparece como texto comum.
Quais tags de BBCode este editor suporta?: São 34 tags no total: [b], [i], [u], [s], [color], [size], [url], [img], [quote], [code], [h1]–[h6], [list] e [table] com suas células, além de [strike], [spoiler], [noparse] e [olist], o que cobre a ajuda de formatação do Steam. Tags fora dessa lista, como [youtube], [font] e [align], aparecem como texto em vez de sumir.
Funciona para perfis do osu! e páginas do ArtFight?: Sim. Você cola o BBCode da sua descrição do osu! ou da sua página do ArtFight e confere a pré-visualização ao vivo antes de salvar. Lembre que cada plataforma suporta um conjunto próprio de tags, então use a pré-visualização para validar a formatação.
Esta ferramenta tem pré-visualização ao vivo?: Tem. Conforme você digita ou cola o BBCode no editor, o painel de pré-visualização atualiza na hora, mostrando exatamente como o texto formatado vai ficar antes de publicar.
Dá para converter BBCode em HTML?: Sim. No painel da direita, alterne de "Pré-visualização" para "HTML" para copiar o código ou baixá-lo como .html. O arquivo baixado é uma página completa, com codificação UTF-8 e o estilo mínimo para spoilers e tabelas, e abre em qualquer navegador. Só links http/https são mantidos, e eles saem com rel="nofollow" abrindo em nova aba; scripts e atributos on* são removidos.
Meu BBCode é enviado para algum servidor?: Não. Toda a interpretação e renderização acontecem inteiramente no seu navegador, então o seu texto nunca sai do dispositivo e nada é enviado.
Como mudar a cor do texto no BBCode?: Use [color=red]texto[/color] com o nome de uma cor em inglês (red, green, purple…) ou [color=#1e90ff]texto[/color] com um código hexadecimal de 3 ou 6 dígitos. O botão de cor da barra abre o seletor do sistema e já insere o código hexadecimal. Se o valor for inválido, o texto aparece sem cor, mas o restante do post continua intacto.
Como redimensionar uma imagem com BBCode?: Informe largura e altura em pixels dentro da tag: [img width=400 height=250]https://example.com/imagem.jpg[/img]. Se passar só a largura, a altura acompanha a proporção. A imagem é carregada do endereço original, que precisa começar com http ou https; a ferramenta não hospeda arquivos, então suba a imagem antes em algum serviço.
Como montar uma tabela em BBCode?: A estrutura é [table] › [tr] para cada linha › [th] para cabeçalho ou [td] para dado: [table][tr][th]Item[/th][th]Preço[/th][/tr][tr][td]Café[/td][td]8,50[/td][/tr][/table]. As células aceitam colspan e rowspan, e [table noborder=1] tira as bordas como no Steam. O botão de tabela da barra insere um modelo 2×2 para você preencher.
O BBCode do Godot é igual ao dos fóruns?: Não exatamente. O RichTextLabel do Godot usa a mesma sintaxe de colchetes, mas tem um conjunto próprio: além de [b], [color] e [img], traz tags de animação como [wave], [shake] e [pulse], que nenhum fórum entende. Esta ferramenta mostra o BBCode de fórum, então essas tags do Godot ficam visíveis como texto.