Posts and Comments
FORMATS: MARKDOWN – HTML – BBCODE
Tables
Column A | Column B | Column C |
---|---|---|
A1 (left aligned) | B1 (centered) | C1 (right aligned) |
A2 | B2 | C2 |
Tables (code)
| Column A | Column B | Column C |
|:--- |:---:| ---:|
| A1 (left aligned) | B1 (centered) | C1 (right aligned) |
| A2 | B2 | C2 |
Bold text
Examples of bold, bold and bold text.
Bold text (code)
Examples of <b>bold</b>, [b]bold[/b] and **bold** text.
Headings
Headings entered as markdown translate to their HTML equivalents:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
The Headings demo has been omitted as it conflicts with the TOC.
Note that an anchor is automatically created with every #
(h1-h6) heading, which can be linked to from anywhere in the forum.
Headings (code)
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Code blocks
Useful to post terminal output or code examples as pre-formatted text
- Translates to the html <pre> element.
Terminal output (bash):
[nix@nix ~]$ ls /
bin dev home lib lost+found opt proc run srv tmp var
boot etc init lib64 mnt root sbin sys usr version
Code highlight (css):
:root {
--green: oklch(51.83% 0.176 142.5);
background-color: var(--green);
}
Code blocks (code)
**Terminal output (bash)**:
```bash
[nix@nix ~]$ ls /
bin dev home lib lost+found opt proc run srv tmp var
boot etc init lib64 mnt root sbin sys usr version
```
**Code highlight (css)**:
```css
:root {
--green: oklch(51.83% 0.176 142.5);
background-color: var(--green);
}
```
Big/Small Text
- Big text
- Small text
Big/Small text (code)
<big>:see_no_evil:</big> <big>:hear_no_evil:</big> <big>:speak_no_evil:</big>
<big>Big text</big>
<small>Small text :mag_right: :microscope:</small>
Strong text
Strong, strong, strong, and strong italic text.
Strong text (code)
<strong>Strong</strong>,
[b]strong[/b],
**strong**,
***strong italic***
Italicized text
italicized, italicized, italicized and italicized text.
Italicized text (code)
*italicized*, [i]italicized[/i], <i>italicized</i>
and _italicized_ text.
Arrows
← or ←
→ or →
↔ or ↔
Arrows (code)
← or <--
→ or -->
↔ or <-->
Keyboard shortcuts
Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+S,
Ctrl+Alt+Delete
Shift+? will quickly access the global Keyboard Shortcuts window.
Keyboard shortcuts (code)
<kbd>Ctrl</kbd>+<kbd>A</kbd>, # Select all
<kbd>Ctrl</kbd>+<kbd>C</kbd>, # Copy
<kbd>Ctrl</kbd>+<kbd>V</kbd>,
<kbd>Ctrl</kbd>+<kbd>S</kbd>,
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd>
Inline Code example
Code or command examples can be written inline by placing the content inside two backticks; for example:
- Update Manjaro:
sudo pacman -Syu
Inline Code example (code)
- Update Manjaro: `sudo pacman -Syu`
Non-clickable links
Prevent clicking of a link; for example:
- Copy/paste this link, don’t click it! -
https://xkcd.com/2880
Non-clickable links (code)
- Copy/paste this link, don’t click it! - `
https://xkcd.com/2880
`
Acronym and tooltip
- Using the HTML <abbr> element with a title attribute.
UEFI
UUID
Acronym and tooltip (code)
<abbr title="Hypertext Markup Language">HTML</abbr>
<abbr title="Unified Extensible Firmware Interface">UEFI</abbr>
<abbr title="Universally Unique Identifier">UUID</abbr>
Disclosure element
Click to toggle content display (closed)
- Use the details/summary HTML element to default to open:
Click to toggle content display (open)
Technology is not just a tool.
It's a means to empower people to accomplish great things.– Neil Armstrong (1930-2012)
Disclosure element (code)
[details="Click to toggle content display"]
[quote="Kepler's laws of planetary motion"]
1. The orbit of a planet is an ellipse with the Sun at one of the two foci.
2. A line segment joining a planet and the Sun sweeps out equal areas during equal intervals of time.
3. The square of a planet's orbital period is proportional to the cube of the length of the semi-major axis of its orbit.
[/quote]
[/details]
<details open>
<summary> Click to toggle content display</summary>
<blockquote>Technology is not just a tool.<br>
It's a means to empower people to accomplish great things.
-- Neil Armstrong (1930-2012)
</blockquote>
Quote tag
Useful when quoting random formatted text and as an alternative to prefacing multiple lines with >
.
Quote (code)
[quote="The Three Laws of Robotics"]
- The First Law: A robot may not injure a human being or, through inaction, allow a human being to come to harm.
- The Second Law: A robot must obey the orders given it by human beings except where such orders would conflict with the First Law.
- The Third Law: A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.
[/quote]
Highlight/Strikethrough
- highlight works; ==highlight== does not.
strikethroughworks as expected.
Highlight/Strikethrough (code)
<mark>highlight</mark> works, ==highlight== does not.
~~strikethrough~~ works --as expected.
Subscript/Superscript
- Subscript: H2O works; H~2~O does not.
- Superscript: X2 works; X^2^ does not.
Subscript/Superscript (code)
- Subscript: H<sub>2</sub>O works; H~2~O does not.
- Superscript: X<sup>2</sup> works; X^2^ does not.
Link and Anchor
The HTML anchor can be used in Discourse as easily as in a typical HTML document. Anchors assist when linking to a specific section of an article. Structurally, anchors are like a HTML link <a>
, but with a name attribute instead of href – which makes it a link target.
Link and Anchor (code)
<a href="#ankhor-morpork">Goto anchor</a>
<a name="ankhor-morpork"></a>
Features and Usability
Image Grid
I found Introducing image grids in posts which prompted me to add an example to Discourse Tips and Tricks.
Add (a minimum of two) image links between [grid]...[/grid]
tags for an Image Grid. Grids will display in two columns on mobile; and three columns on desktop devices. *Richt-click to open an original image in a new tab.
Image Grid template:
[grid]




[/grid]
DiscoTOC (Table of Contents)
DiscoTOC is an automatic TOC generated via a button in the Composer gear menu.
This Discourse theme-component allows automatic TOC to be generated from the markdown Headings of the initial post in any given thread. This is especially beneficial for the creation of Tutorials and similar posts.
Update:- DiscoTOC is activated for T2 and above.
Forum Keyboard Shortcuts
At the bottom of the Site menu is a button that launches a modal window listing keyboard shortcuts available for use on the Manjaro forum.
Due to an unfortunate design condition, this button is obfuscated when all disclosure dropdowns are expanded, and can be easily overlooked.
Shift+? will quickly access the global Keyboard Shortcuts window.
Keyboard Shortcuts Modal
Discourse Spoiler-Alert
I attempted to create a spoiler such as typically used in many forums;
[spoiler]I'm feeling spoiled[/spoiler]
. It didn’t work.
Here's why:
It turns out that Discourse Spoiler-Alert is an official Discourse plugin that, when activated, is available from the Composer menu.
I suppose that a Disclosure element already provides this basic fuctionality; and is more common due to HTML5 adoption. Plus, it doesn’t require an additional plugin.
Is it worth having a spoiler type disclosure purely for old time’s sake?
Contributors:
@andreas85 @Aragorn @Ben @cscs @dmt @Jtyle6 @Mirdarthos @soundofthunder @Tomek @Yochanan