Formatando posts usando markdown, BBCode e HTML

:bookmark: This reference guide details all the formatting options available in Discourse posts, including markdown, BBCode, and HTML. It specifies what is supported and provides resources where you can see examples.

:person_raising_hand: Required user level: All users

Understanding supported formatting in posts

While plain text is sufficient for most replies, Discourse allows users to enhance the formatting of their posts by using markdown, BBCode, and HTML. This guide explains what types of formatting are supported and how you can use them effectively.

You can also practice some of the basics in an interactive tutorial by sending a personal message to @discobot here or on any Discourse site.

Summary

This guide covers:

  • Supported markdown syntax
  • Supported BBCode tags
  • Supported and safe HTML tags and attributes

Best practices

  • Use markdown primarily for its simplicity and readability.
  • Mix markdown and BBCode only when necessary, and keep usage consistent.
  • Limit the use of HTML to simple, safe tags to avoid formatting issues and ensure posts are secure.

Supported markdown

Discourse uses markdown-it for its markdown implementation.

Some commonly used markdown features include:

  • Bold: **text**
  • Italic: *text*
  • Link: [title](https://example.com)
  • Inline code: `code`
  • Highlight: <mark></mark>
  • Code block:
    ```
    code block
    ```
    

In longer posts (like this one), it can also be helpful to add structure using headings:

# Heading 1
## Heading 2
### Heading 3

Note: when an image is uploaded, the markdown syntax to reference the image will automatically be generated.

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

For a full list of markdown features, please refer to the interactive guide.

Supported BBCode

Discourse supports a subset of common BBCode tags, some of which are generated automatically to support special formatting, for example when you quote a post in your reply:

[quote="user"]quoted text[/quote]

You can also use BBCode to mark hide text as a spoiler or as details

spoiled text

[spoiler]spoiled text[/spoiler]
click to expand

hidden text

[details="click to expand"]hidden text[/details]

BBCode tags for simple formatting supported by markdown or are also supported:

  • [b]strong[/b]
  • [i]emphasis[/i]
  • [u]underlined[/u]
  • [s]strikethrough[/s]
  • [ul][li]option one[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]code[/code]

For a complete list of supported BBCode tags and examples, check the Discourse BBCode tests.

Supported HTML

Discourse supports a safe subset of HTML. While you can mix HTML with markdown, only specific HTML tags and attributes are allowed to ensure security and consistent styling.

Some of the allowed HTML tags include:

  • <a href="https://example.com">link</a>
  • <strong>bold text</strong>
  • <em>italic text</em>
  • <ul><li>list item</li></ul>
  • <img src="https://example.com/image.png" alt="description">

For a detailed list of allowed HTML tags and attributes, refer to Discourse’s allow-list.

:information_source: Note: Inline styles, like <span style="color:red">colored text</span>, are not supported. For custom styles, see customize post contents.

Common issues and solutions

  • BBCode or HTML tags not working: Ensure the tags you are using are part of the supported subset.
  • Inline styles being stripped: Discourse does not support inline styles for security reasons. Use custom styles or plugins if necessary.
  • Formatting changes on pasting from other editors: Some rich-text formats may not render correctly. Use markdown to format text consistently.

FAQs

Q: Can I use tables in Discourse?
A: Yes, you can use markdown to create tables. For more information, see this guide on tables.

Q: Why isn’t my inline style working?
A: Discourse does not support inline styles in HTML for security reasons. Consider using custom BBCode or the Discourse custom styling guide.

Q: Can I add custom BBCode tags?
A: Yes, you can add custom BBCode tags. Refer to the Discourse BBCode plugin for more information.

Additional resources

Last edited by @MarkDoerr 2024-07-11T00:31:08Z

Check documentPerform check on document:
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: