Mise en forme des messages en utilisant Markdown, BBCode et 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 « J'aime »

Aucune de ces références ne mentionne de tableaux.

2 « J'aime »

C’est vrai, mais ce sujet-ci l’est. Adding a table to your post using markdown

2 « J'aime »

La couleur du texte et la couleur d’arrière-plan du texte ne semblent pas fonctionner avec <span> ou le bbcode, est-ce que je manque quelque chose ?

  • <span>some red markdown text</span>
    • some red markdown text
  • bbcode : [color=red]Red color text[/color]
    • [color=red]Red color text[/color]
1 « J'aime »

oui, il semble que le style en ligne HTML ne soit pas pris en charge

Vous pouvez utiliser ce guide :

(Et le voir en action ici : 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

Ou utilisez ce plugin qui étend la prise en charge du BBcode :

Quant aux balises HTML autorisées, je crois que c’est la référence :
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

Bien que je ne trouve pas les balises HTML de tableau (qui sont autorisées) à l’intérieur pour une raison quelconque.

Peut-être parce qu’elles sont référencées ici :

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

5 « J'aime »

Merci beaucoup pour les références utiles !

1 « J'aime »

Il semble qu’actuellement, le filtre soit configuré de telle sorte que les attributs rowspan et colspan sur les éléments td et th soient filtrés. Ma compréhension est que ceux-ci sont sûrs (et je crois qu’ils sont très utiles) : l’équipe serait-elle ouverte à autoriser ces attributs ?

En aparté, @Canapin a parlé de l’emplacement de la liste autorisée des balises table.

Le fichier .../discourse-markdown/table.js, cependant, semble être une implémentation spécifiquement autour des tables Markdown ; les tables HTML régulières auraient-elles besoin d’une extension séparée pour allowList ?

Je pense que rowspan et colspan sont assez sûrs, mais je voudrais aussi demander une autre pièce de balisage. Pourrions-nous autoriser les attributs data-* sur les éléments de table ? Je pense que ce serait très utile pour spécifier différents types de contenu de table, en particulier pour les utiliser comme crochets pour du CSS personnalisé.

1 « J'aime »

Salut :slight_smile:

Je pense que ce serait plus délicat que prévu.
Si vous créez un tableau HTML dans votre message, et que quelqu’un cite votre tableau, il est converti en Markdown, qui ne prend pas en charge rowspan et colspan.

Je soupçonne qu’il y aurait d’autres problèmes auxquels je n’ai pas pensé.

Ce n’est pas exactement la même chose, mais vous pouvez envelopper votre tableau avec des balises [wrap] :slight_smile:
Voir : Customize posts' contents with your own styles
Mais vous ne pourrez pas avoir d’attributs data- à l’intérieur d’un tableau HTML (par exemple, pour personnaliser des lignes ou des cellules spécifiques).

edit : si votre tableau utilise du Markdown au lieu du HTML, vous pouvez insérer des spans avec des attributs data- comme ceci :

|Colonne 1 | Colonne 2|
|--- | ---|
|<span data-thing>test</span> | test|
|test | test|

Mais ils seront supprimés si quelqu’un cite ou copie-colle votre tableau.

1 « J'aime »

Il serait très utile que certains styles CSS en ligne simples et sûrs soient respectés dans le HTML brut ajouté aux publications Discourse. Il pourrait y avoir des publications HTML converties à partir d’un moteur de forum précédent et/ou les utilisateurs collent parfois du texte enrichi avec des éléments tels que l’alignement du texte et/ou des images.

Ce qui suit fonctionne comme prévu :


<div>
<p>Test</p>
</div>

Test

Mais ceci ne fonctionne pas :


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

Test


Il en va de même pour le formatage en ligne <span style="color: ....

Il est plus probable de trouver des styles en ligne comme ceux-ci dans du contenu converti / collé à partir d’autres éditeurs WYSIWYG.

L’attribut style n’est pas autorisé dans Discourse car il pourrait facilement tout casser.

De plus, Discourse a une certaine philosophie sur la manière dont les informations doivent être présentées dans les publications et limite les balises et attributs à dessein.

L’attribut align sur <div est explicitement autorisé ici : https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#LL147C2-L147C16

Si vous deviez migrer un forum et souhaitiez conserver un style spécial comme des couleurs, je recommanderais Discourse BBCode et modifier l’importateur si nécessaire :slight_smile:

3 « J'aime »

Existe-t-il une raison pour laquelle la balise de citation \u003e n’est pas incluse dans la section Markdown ? C’est de loin, d’après mon expérience, la chose la plus courante que les gens n’utilisent pas alors qu’ils le devraient.

Je sais que vous ne pouvez pas tout lister, mais dans les forums où les gens citent souvent d’autres sources, c’est essentiel.

@one1, il ne faut pas encourager la citation intra-forum. Son remplacement est [quote]. Sinon, je suis d’accord.

Je parlais de citer des articles universitaires.

C’est super utile ! Merci beaucoup ! :grinning_face: