Formatage des publications avec markdown, BBCode et HTML

:bookmark: Ce guide de référence détaille toutes les options de formatage disponibles dans les publications Discourse, y compris le markdown, le BBCode et le HTML. Il spécifie ce qui est pris en charge et fournit des ressources où vous pouvez voir des exemples.

:person_raising_hand: Niveau d’utilisateur requis : Tous les utilisateurs

Comprendre le formatage pris en charge dans les publications

Bien que le texte brut suffise pour la plupart des réponses, Discourse permet aux utilisateurs d’améliorer le formatage de leurs publications en utilisant le markdown, le BBCode et le HTML. Ce guide explique quels types de formatage sont pris en charge et comment vous pouvez les utiliser efficacement.

Vous pouvez également vous exercer sur quelques bases dans un tutoriel interactif en envoyant un message privé à @discobot ici ou sur n’importe quel site Discourse.

Résumé

Ce guide couvre :

  • La syntaxe markdown prise en charge
  • Les balises BBCode prises en charge
  • Les balises et attributs HTML pris en charge et sûrs

Bonnes pratiques

  • Utilisez le markdown principalement pour sa simplicité et sa lisibilité.
  • Mélangez le markdown et le BBCode uniquement lorsque cela est nécessaire, et maintenez une utilisation cohérente.
  • Limitez l’utilisation du HTML aux balises simples et sûres pour éviter les problèmes de formatage et garantir la sécurité des publications.

Markdown pris en charge

Discourse utilise markdown-it pour son implémentation markdown.

Certaines fonctionnalités markdown couramment utilisées incluent :

  • Gras : **texte**

  • Italique : *texte*

  • Lien : [titre](https://example.com)

  • Code en ligne : `code`

  • Surligner : <mark></mark>

  • Bloc de code :

    ```
    bloc de code
    ```
    

Dans les publications plus longues (comme celle-ci), il peut également être utile d’ajouter une structure à l’aide de titres :

# Titre 1
## Titre 2
### Titre 3

Remarque : lorsqu’une image est téléchargée, la syntaxe markdown pour référencer l’image sera générée automatiquement.

![légende|500x500](upload://image.jpeg)

Pour une liste complète des fonctionnalités markdown, veuillez vous référer au guide interactif.

BBCode pris en charge

Discourse prend en charge un sous-ensemble de balises BBCode courantes, dont certaines sont générées automatiquement pour prendre en charge un formatage spécial, par exemple lorsque vous citez une publication dans votre réponse :

[quote=“utilisateur”]texte cité[/quote]

[quote="utilisateur"]texte cité[/quote]

Vous pouvez également utiliser le BBCode pour marquer du texte masqué comme un spoiler ou comme des détails

texte révélé

[spoiler]texte révélé[/spoiler]

[details=“cliquer pour développer”]texte masqué[/details]

[details="cliquer pour développer"]texte masqué[/details]

Les balises BBCode pour un formatage simple pris en charge par le markdown ou sont également prises en charge :

  • [b]texte en gras[/b]
  • [i]emphase[/i]
  • [u]souligné[/u]
  • [s]barré[/s]
  • [ul][li]option un[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]code[/code]

Pour une liste complète des balises BBCode prises en charge et des exemples, consultez les tests BBCode de Discourse.

HTML pris en charge

Discourse prend en charge un sous-ensemble sûr de HTML. Bien que vous puissiez mélanger le HTML avec le markdown, seules des balises et attributs HTML spécifiques sont autorisés pour garantir la sécurité et un style cohérent.

Parmi les balises HTML autorisées figurent :

  • <a href="https://example.com">lien</a>
  • <strong>texte en gras</strong>
  • <em>texte en italique</em>
  • <ul><li>élément de liste</li></ul>
  • <img src="https://example.com/image.png" alt="description">

Pour une liste détaillée des balises et attributs HTML autorisés, consultez la liste blanche de Discourse.

:information_source: Remarque : Les styles en ligne, comme <span>texte en couleur</span>, ne sont pas pris en charge. Pour des styles personnalisés, consultez personnaliser le contenu des publications.

Problèmes courants et solutions

  • Les balises BBCode ou HTML ne fonctionnent pas : Assurez-vous que les balises que vous utilisez font partie du sous-ensemble pris en charge.
  • Les styles en ligne sont supprimés : Discourse ne prend pas en charge les styles en ligne pour des raisons de sécurité. Utilisez des styles personnalisés ou des plugins si nécessaire.
  • Le formatage change lors du collage depuis d’autres éditeurs : Certains formats de texte enrichi peuvent ne pas s’afficher correctement. Utilisez le markdown pour formater le texte de manière cohérente.

FAQ

Q : Puis-je utiliser des tableaux dans Discourse ?
R : Oui, vous pouvez utiliser le markdown pour créer des tableaux. Pour plus d’informations, consultez ce guide sur les tableaux.

Q : Pourquoi mon style en ligne ne fonctionne-t-il pas ?
R : Discourse ne prend pas en charge les styles en ligne en HTML pour des raisons de sécurité. Envisagez d’utiliser un BBCode personnalisé ou le guide de style personnalisé de Discourse.

Q : Puis-je ajouter des balises BBCode personnalisées ?
R : Oui, vous pouvez ajouter des balises BBCode personnalisées. Consultez le plugin BBCode de Discourse pour plus d’informations.

Ressources supplémentaires

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:

Ce lien est cassé.

2 « J'aime »

Merci ! Cela devrait être corrigé maintenant.

1 « J'aime »