Skip to content

Instantly share code, notes, and snippets.

@extratone
Created July 18, 2024 02:37
Show Gist options
  • Save extratone/9f0f09d2858882738d51639c40e4bd58 to your computer and use it in GitHub Desktop.
Save extratone/9f0f09d2858882738d51639c40e4bd58 to your computer and use it in GitHub Desktop.
Discourse | 2024-07-11 00:31:08 UTC | #1
> :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](https://github.com/markdown-it/markdown-it) for its markdown implementation.
Some commonly used markdown features include:
- **Bold**: `**text**`
- *Italic*: `*text*`
- [Link](https://example.com): `[title](https://example.com)`
- `Inline code`: `` `code` ``
- <mark>Highlight</mark>: `<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](https://markdown-it.github.io/).
## 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]
```
[quote="user"]quoted text[/quote]
```
You can also use BBCode to mark hide text as a spoiler or as details
[spoiler]spoiled text[/spoiler]
```
[spoiler]spoiled text[/spoiler]
```
[details="click to expand"]hidden text[/details]
```
[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](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/unit/lib/pretty-text-test.js).
## 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](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115).
:information_source: **Note:** Inline styles, like `<span style="color:red">colored text</span>`, are not supported. For custom styles, see [customize post contents](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738).
## 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](https://meta.discourse.org/t/add-a-table-to-your-post-using-markdown/66544).
**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](https://meta.discourse.org/t/discourse-bbcode/65425) for more information.
## Additional resources
- Interactive markdown guide: https://markdown-it.github.io/
- Customize post contents: https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738
- Discourse BBCode plugin: https://meta.discourse.org/t/discourse-bbcode/65425
-------------------------
Nikki_Locke | 2022-10-14 15:37:17 UTC | #2
None of these references mention tables.
-------------------------
not-ethan | 2022-10-14 15:54:16 UTC | #3
That is true but this other topic does. https://meta.discourse.org/t/add-a-table-to-your-post-using-markdown/66544?u=not-ethan
-------------------------
rahim123 | 2022-12-02 14:23:02 UTC | #4
[quote="Jeff Atwood, post:1, topic:239348, username:codinghorror"]
However, we only support a “safe” subset of HTML. I’ll have to dig to find the specifics, but anything common you’d expect to work that isn’t crazy – like `<script>` – should work.
[/quote]
Text color and text background color doesn't seem to work with `<span>` or bbcode, am I missing something?
- `<span style="color:red">some red markdown text</span>`
- <span style="color:red">some red markdown text</span>
- bbcode: `[color=red]Red color text[/color]`
- [color=red]Red color text[/color]
-------------------------
Maksim_Beliaev | 2022-12-16 16:06:23 UTC | #5
yes, looks like HTML inline style is not supported
-------------------------
Canapin | 2023-06-20 09:55:58 UTC | #6
[quote="rahim123, post:4, topic:239348"]
Text color and text background color doesn’t seem to work with `<span>` or bbcode, am I missing something?
[/quote]
You can make use of this guide:
https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738?u=canapin
(And see it in action here: https://unicyclist.com/t/wiki-schlumpf-hub-serial-numbers-reference/106130)
Or use this plugin that extends BBcode support:
https://meta.discourse.org/t/discourse-bbcode/65425
As for the allowed HTML tags, I believe this is the reference:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115
Though I don't find table HTML tags (which are allowed) inside for some reason.
Maybe because they are referenced here:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js#L31
-------------------------
rahim123 | 2022-12-16 18:15:21 UTC | #7
Thanks a lot for the useful references!
-------------------------
jlc | 2023-03-31 18:40:43 UTC | #8
[quote="Jeff Atwood, post:1, topic:239348, username:codinghorror"]
we only support a “safe” subset of HTML.
[/quote]
It looks like currently, the filter is set up so that the `rowspan` and `colspan` attributes on `td` and `th` elements are filtered out. My understanding is that these are safe (and I believe they are very useful): would the team be open to allowing these attributes?
As a sidebar, @Canapin talked about the location of the allowed list of `table` tags.
[quote="Coin-coin le Canapin, post:6, topic:239348, username:Canapin"]
Though I don’t find table HTML tags (which are allowed) inside for some reason.
Maybe because they are referenced here:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js#L31
[/quote]
The `.../discourse-markdown/table.js` file, though, seems to be an implementation around specifically Markdown tables; would regular HTML tables need a separate extension to `allowList`?
I believe `rowspan` and `colspan` are pretty safe, but I also want to ask for one other piece of markup. Could we allow `data-*` attributes on table elements? I think this would be very useful for specifying different types of table contents, in particular to use as hooks for custom CSS.
-------------------------
Canapin | 2023-03-31 21:32:09 UTC | #9
Hi :slight_smile:
[quote="John L. Clark, post:8, topic:239348, username:jlc"]
would the team be open to allowing these attributes?
[/quote]
I think this would be trickier than expected.
If you create an HTML table in your post, and someone quotes your table, it's converted into Markdown which doesn't support `rowspan` and `colspan`.
I suspect there would be other issues I didn't think about.
[quote="John L. Clark, post:8, topic:239348, username:jlc"]
Could we allow `data-*` attributes on table elements? I think this would be very useful for specifying different types of table contents, in particular to use as hooks for custom CSS.
[/quote]
It's not exactly the same, but you can wrap your table with `[wrap]` tags :slight_smile:
See: https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738?u=canapin
But you won't be able to have `data-` attributes *inside* an HTML table (for example, to customize specific rows or cells).
edit: if your table uses Markdown instead of HTML, you can insert spans with `data-` attributes like this:
```
|Column 1 | Column 2|
|--- | ---|
|<span data-thing>test</span> | test|
|test | test|
```
But they will be removed if someone quotes or copy-paste your table.
-------------------------
rahim123 | 2023-06-11 17:42:30 UTC | #12
It would be really helpful if some simple and safe inline CSS styles were obeyed in raw HTML added to Discourse posts. There could be converted HTML posts from a previous forum engine and/or users sometimes paste in rich text with things like text and/or image alignment.
The following works as expected:
------------
```
<div align="center">
<p>Test</p>
</div>
```
<div align="center">
<p >Test</p>
</div>
But this doesn't:
-------------
`<p style="text-align: center;">Test</p>`
<p style="text-align: center;">Test</p>
-----------
The same goes for inline `<span style="color: ...` formatting.
There's more likely to be inline styles like that in converted / pasted content from other WYSIWYG editors.
-------------------------
Canapin | 2023-06-12 16:23:55 UTC | #13
The `style` attribute isn't allowed in Discourse because it could easily break things.
Also, Discourse has a certain philosophy on how information show be presented in posts, and limits tags and attributes on purpose.
The `align` attribute on `<div>` is explicitly allowed here: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#LL147C2-L147C16
If you were to migrate a forum and wanted to keep some special styling like colors, I'd go with https://meta.discourse.org/t/discourse-bbcode/65425?u=canapin and edit the importer if needed :)
-------------------------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment