Formatando posts usando markdown, BBCode e HTML

:bookmark: Este guia de referência detalha todas as opções de formatação disponíveis nas postagens do Discourse, incluindo markdown, BBCode e HTML. Ele especifica o que é suportado e fornece recursos onde você pode ver exemplos.

:person_raising_hand: Nível de usuário necessário: Todos os usuários

Entendendo a formatação suportada em postagens

Embora o texto simples seja suficiente para a maioria das respostas, o Discourse permite que os usuários aprimorem a formatação de suas postagens usando markdown, BBCode e HTML. Este guia explica quais tipos de formatação são suportados e como você pode usá-los de forma eficaz.

Você também pode praticar alguns dos conceitos básicos em um tutorial interativo enviando uma mensagem pessoal para @discobot aqui ou em qualquer site do Discourse.

Sumário

Este guia abrange:

  • Sintaxe markdown suportada
  • Tags BBCode suportadas
  • Tags e atributos HTML suportados e seguros

Melhores práticas

  • Use markdown principalmente por sua simplicidade e legibilidade.
  • Misture markdown e BBCode apenas quando necessário e mantenha o uso consistente.
  • Limite o uso de HTML a tags simples e seguras para evitar problemas de formatação e garantir que as postagens estejam seguras.

Markdown Suportado

O Discourse usa markdown-it para sua implementação de markdown.

Alguns recursos de markdown comumente usados incluem:

  • Negrito: **texto**

  • Itálico: *texto*

  • Link: [título](https://example.com)

  • Código em linha: `código`

  • Realçar: <mark></mark>

  • Bloco de código:

    ```
    bloco de código
    ```
    

Em postagens mais longas (como esta), também pode ser útil adicionar estrutura usando títulos:

# Título 1
## Título 2
### Título 3

Nota: quando uma imagem é carregada, a sintaxe markdown para referenciar a imagem será gerada automaticamente.

![legenda|500x500](upload://image.jpeg)

Para uma lista completa de recursos de markdown, consulte o guia interativo.

BBCode Suportado

O Discourse suporta um subconjunto de tags BBCode comuns, algumas das quais são geradas automaticamente para suportar formatação especial, por exemplo, quando você cita uma postagem em sua resposta:

[quote=“usuário”]texto citado[/quote]

[quote="usuário"]texto citado[/quote]

Você também pode usar BBCode para marcar texto oculto como um spoiler ou como detalhes

texto estragado

[spoiler]texto estragado[/spoiler]

[details=“clique para expandir”]texto oculto[/details]

[details="clique para expandir"]texto oculto[/details]

Tags BBCode para formatação simples suportadas por markdown ou também são suportadas:

  • [b]forte[/b]
  • [i]ênfase[/i]
  • [u]sublinhado[/u]
  • [s]riscado[/s]
  • [ul][li]opção um[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]código[/code]

Para uma lista completa de tags BBCode suportadas e exemplos, confira os testes BBCode do Discourse.

HTML Suportado

O Discourse suporta um subconjunto seguro de HTML. Embora você possa misturar HTML com markdown, apenas tags e atributos HTML específicos são permitidos para garantir segurança e estilo consistente.

Algumas das tags HTML permitidas incluem:

  • <a href="https://example.com">link</a>
  • <strong>texto em negrito</strong>
  • <em>texto em itálico</em>
  • <ul><li>item da lista</li></ul>
  • <img src="https://example.com/image.png" alt="descrição">

Para uma lista detalhada de tags e atributos HTML permitidos, consulte a lista de permissões do Discourse.

:information_source: Nota: Estilos em linha, como <span>texto colorido</span>, não são suportados. Para estilos personalizados, consulte personalizar o conteúdo das postagens.

Problemas comuns e soluções

  • Tags BBCode ou HTML não funcionando: Certifique-se de que as tags que você está usando fazem parte do subconjunto suportado.
  • Estilos em linha sendo removidos: O Discourse não suporta estilos em linha por motivos de segurança. Use estilos personalizados ou plugins, se necessário.
  • Mudanças de formatação ao colar de outros editores: Alguns formatos de texto rico podem não ser renderizados corretamente. Use markdown para formatar o texto de forma consistente.

FAQs

P: Posso usar tabelas no Discourse?
R: Sim, você pode usar markdown para criar tabelas. Para mais informações, consulte este guia sobre tabelas.

P: Por que meu estilo em linha não está funcionando?
R: O Discourse não suporta estilos em linha em HTML por motivos de segurança. Considere usar BBCode personalizado ou o guia de estilo personalizado do Discourse.

P: Posso adicionar tags BBCode personalizadas?
R: Sim, você pode adicionar tags BBCode personalizadas. Consulte o plugin BBCode do Discourse para mais informações.

Recursos adicionais

31 curtidas

Nenhuma dessas referências menciona tabelas.

2 curtidas

Isso é verdade, mas este outro tópico sim. Adding a table to your post using markdown

2 curtidas

A cor do texto e a cor de fundo do texto não parecem funcionar com <span> ou bbcode, estou perdendo alguma coisa?

  • <span>some red markdown text</span>
    • some red markdown text
  • bbcode: [color=red]Red color text[/color]
    • [color=red]Red color text[/color]
1 curtida

Sim, parece que o estilo inline HTML não é suportado

Você pode usar este guia:

(E veja em ação aqui: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

Ou use este plugin que estende o suporte a BBcode:

Quanto às tags HTML permitidas, acredito que esta seja a referência:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

Embora eu não encontre tags HTML de tabela (que são permitidas) dentro delas por algum motivo.

Talvez porque elas sejam referenciadas aqui:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js#L31

5 curtidas

Muito obrigado pelas referências úteis!

1 curtida

Parece que atualmente, o filtro está configurado de forma que os atributos rowspan e colspan nos elementos td e th são filtrados. Minha compreensão é que eles são seguros (e acredito que são muito úteis): a equipe estaria aberta a permitir esses atributos?

Como observação, @Canapin falou sobre a localização da lista permitida de tags table.

O arquivo .../discourse-markdown/table.js, no entanto, parece ser uma implementação especificamente em torno de tabelas Markdown; tabelas HTML regulares precisariam de uma extensão separada para allowList?

Acredito que rowspan e colspan são bastante seguros, mas também quero pedir outra peça de marcação. Poderíamos permitir atributos data-* em elementos de tabela? Acho que isso seria muito útil para especificar diferentes tipos de conteúdo de tabela, em particular para usar como ganchos para CSS personalizado.

1 curtida

Olá :slight_smile:

Acho que isso seria mais complicado do que o esperado.
Se você criar uma tabela HTML em sua postagem, e alguém citar sua tabela, ela será convertida em Markdown, que não suporta rowspan e colspan.

Suspeito que haveria outros problemas que não pensei.

Não é exatamente a mesma coisa, mas você pode envolver sua tabela com tags [wrap] :slight_smile:
Veja: Customize posts' contents with your own styles
Mas você não poderá ter atributos data- dentro de uma tabela HTML (por exemplo, para personalizar linhas ou células específicas).

edite: se sua tabela usa Markdown em vez de HTML, você pode inserir spans com atributos data- assim:

|Coluna 1 | Coluna 2|
|--- | ---|
|<span data-thing>teste</span> | test|
|test | test|

Mas eles serão removidos se alguém citar ou copiar e colar sua tabela.

1 curtida

Seria muito útil se alguns estilos CSS inline simples e seguros fossem respeitados no HTML bruto adicionado às postagens do Discourse. Poderiam ser postagens HTML convertidas de um motor de fórum anterior e/ou usuários que às vezes colam texto formatado com coisas como alinhamento de texto e/ou imagem.

O seguinte funciona como esperado:



<div align="center">
<p>Test</p>
</div>

Test

Mas isto não:


<p style="text-align: center;">Test</p>

Test


O mesmo vale para a formatação inline <span> style="color: ....

É mais provável que haja estilos inline como esses em conteúdo convertido / colado de outros editores WYSIWYG.

O atributo style não é permitido no Discourse porque poderia facilmente quebrar coisas.

Além disso, o Discourse tem uma certa filosofia sobre como as informações devem ser apresentadas nas postagens e limita tags e atributos propositalmente.

O atributo align em <div é explicitamente permitido aqui: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#LL147C2-L147C16

Se você fosse migrar um fórum e quisesse manter alguma estilização especial, como cores, eu usaria Discourse BBCode e editaria o importador, se necessário :slight_smile:

3 curtidas

Existe um motivo para o markup de citação > não ser incluído na seção Markdown? Esta é, de longe, na minha experiência, a coisa mais comum que as pessoas não usam quando deveriam.

Eu sei que você não pode listar tudo, mas em fóruns onde as pessoas costumam citar outras fontes, isso é essencial.

@one1, deve ser desencorajado para citação dentro do fórum. Sua substituição lá é [quote]. Caso contrário, concordo.

Eu estava falando sobre citar artigos acadêmicos.

Isso é super útil! Muito obrigado! :grinning_face:

Esse link está quebrado.

2 curtidas

Obrigado! Deve estar corrigido agora.

1 curtida