To help make our posts more visual and organized, we’ve added several custom Markdown Wraps. These allow you to center content, create buttons, and handle dark/light mode images easily.
1. Centering Content
Use the center wrap to align images, text, or headers to the middle of the post.
[wrap=center]
Your content here (images, text, etc.)
[/wrap]
This is centered
2. Interactive Buttons
You can turn any text or link into a styled button. To make the whole button clickable, wrap the [wrap] inside the Markdown link brackets.
[[wrap=button]Click Me[/wrap]](https://your-link.com)
Placing Buttons Side-by-Side:
To place two buttons next to each other on the same line, simply place the Markdown links one after another:
[[wrap=button]Button 1[/wrap]](https://link1.com) [[wrap=button]Button 2[/wrap]](https://link2.com)
3. Light & Dark Mode Images
If you have a diagram or icon that needs to change based on the user’s theme, use these specific wrappers:
[wrap=light-version]
!(upload://...)
[/wrap]
[wrap=dark-version]
!(upload://...)
[/wrap]
The system will automatically hide the version that doesn’t match the user’s current theme.
4. Compact “Tight” Text
Discourse adds a significant gap between paragraphs by default. To group lines closer together and automatically hide accidental empty lines, use tight-text. This is especially useful when adding legend text to images:
[wrap=tight-text]
[wrap=light-version]
[/wrap]
[wrap=dark-version]
[/wrap]
Fig1.: Image legend
[/wrap]
NOT:
Fig1.: Image legend
5. Using System Icons
You can insert SVG icons from the FontAwesome library directly into your text.
Basic Usage:
[wrap=icon id=download][/wrap]
[wrap=icon id=amazon][/wrap] Buy on Amazon
Excample:
Finding Icons:
Browse thousands of available icons at FontAwesome.com. Use the Free filter; if an icon doesn’t appear, contact an admin to add it to the site’s allowed subset.
6. Important: Rules for Nesting Wraps
The Discourse parser is sensitive to how wraps are nested. Putting nested wraps on the same line usually causes a rendering error.
This will NOT work:
[[wrap=button][wrap=icon id=download][/wrap]Download Sample[/wrap]](https://example.com)
(The icon wrap will break the button styling.)
This WILL work:
Nesting only works reliably if the start and end of each wrap are on their own new lines. You can use this method to center buttons or group them within tight text:
[wrap=center]
[[wrap=button]Download Now[/wrap]](https://link.com)
[/wrap]
Summary Cheat Sheet
| Feature | Wrap Syntax | Result |
|---|---|---|
| Center | [wrap=center]...[/wrap] |
Aligns content to middle |
| Buttons | [[wrap=button]Text[/wrap]](URL) |
Creates a styled, clickable button |
| Dark/Light | [wrap=dark-version]...[/wrap] |
Shows only when Dark Mode is active |
| Tight Text | ...[/wrap] |
Removes gaps between paragraphs |
| Icons | [wrap=icon id=name][/wrap] |
Inserts an SVG icon (e.g. download) |