[Forum Usage] Discourse Tips and Tricks

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

  • :see_no_evil: :hear_no_evil: :speak_no_evil:
  • Big text
  • Small text :mag_right: :microscope:
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)
&larr; or <--
&rarr; or -->
&harr; 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.
  • strikethrough works 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

Goto 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>

:anchor:


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]
![](link-to-picture-1.jpg)
![](link-to-picture-2.jpg)
![](link-to-picture-3.jpg)
![](link-to-picture-4.jpg)
[/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 now activated for testing by 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

Screenshot_20240116_1
Screenshot_20240116_2


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 :gear: 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 disclosere purely for old time’s sake?


Contributors:

@andreas85 @Aragorn @Ben @cscs @dmt @Jtyle6 @Mirdarthos @soundofthunder @Tomek @Yochanan

7 Likes

Also code blocks:

Sed
sollicitudin dolor
eget nisl elit id
condimentum
arcu erat varius
cursus sem quis eros.
Code block (code)

```
Sed
sollicitudin dolor
eget nisl elit id
condimentum
arcu erat varius
cursus sem quis eros.
```

Specifically useful and used when posting output from a terminal.

1 Like

Small text :mag_right:
Big text :see_no_evil:

Markdown small / big
<small>Small text :mag_right:</small>
<big>Big text</big> <big>:see_no_evil:</big>
Code blocks perform good automatic highlighting (most of the time)
 public static void main(String[] args) {
      EventQueue.invokeLater(new Runnable() {
         @Override
         public void run() {
            try {
               Config window=new Config();
               window.frame.setVisible(true);
            } catch (Exception e) {
               e.printStackTrace();
            }
         }
      });
   }

Link Joplin Guide

Tabulate Format Right
_______________________________ _______________________________
strong strong [b]strong[/b] **strong**

Sadly no format with inline code.

Disclosure (dropdown)

Click me to show hidden content

Technology is not just a tool. It’s a means to empower people to accomplish great things.

– Neil Armstrong

Disclosure (code)
[details="Click me to show hidden content"]
## Technology is not just a tool. It's a means to empower people to accomplish great things.
-- Neil Armstrong
[/details]
Italicized text

italicized

*italicized*
[i]italicized[/i]
<i>italicized</i>
Keyboard shortcut

Ctrl+C

<kbd>Ctrl+C</kbd>
1 Like

Or

_italicized_

For italicized

Edit:

You can format inline code!

Like this
You _`can`_ **`format`** inline _**code**_!

Automatic detection and code formatting applies with block code, it’s hardly the same thing :stuck_out_tongue:

sleep 2

vs

sleep 2

Yeah, that I know. But You can format inline code. Up to a point, but you can!

:smile: :innocent:

This works nicely in the Manjaro forum, and as a +1, it also conforms with the thread topic; unlike the Link Joplin Guide. :eyes: :stuck_out_tongue_winking_eye: Ah, but scrw it! Obsidian: Sharpen your thinking.

1 Like

My favourite:
Alt+F4

<kbd>Alt+F4</kbd>

And also arrows
&larr;
&rarr;
&harr;
&nearr; :arrow_upper_right: – ok maybe except this, arrow emojis are ugly :stuck_out_tongue:
↺ ↯ and more HTML Arrow Symbols, Entities and Codes — Toptal Designers

1 Like

OMG - you’re a hero, I was going to ask about that one after seeing it recently…

But why Alt+F4, surely Ctrl+Q would be nicer!

Alt + F4 works for everything.

For terminals, Ctrl+S pauses the output, and Ctrl+Q un-pauses.

1 Like

Ctrl+Alt+Delete works better :rofl:

But seriously, Alt+F4 closes a window. It’s not a good plan for Firefox, for example, where Ctrl+Q closes the application Nicely.

1 Like

Yeah you can close a single window, and closing the last window also closes the app. :+1:

Having said that I sometimes use killall firefox and this seems nicer, so thanks for telling me about it. :smiley:

Checks out.

:smile:

First of all — but this is off-topic for the thread — Alt+F4 is the default setup for closing a window because that’s how it is in Microsoft Windows. In my user account here, I have changed that to Alt+Esc instead, which I find much more logical. By the same token, Plasma sets up Meta+E as the default shortcut for launching dolphin, because Microsoft Windows uses the same shortcut for launching the Windows File Explorer. Needless to say, I’ve changed this as well here on my system. :grin:

Secondly, the difference between Alt+F4 and Ctrl+Q is that the latter is interpreted by the application itself. As @dmt pointed out, Ctrl+Q is a terminal shortcut for resuming suspended output.

Therefore, in other applications, Ctrl+Q asks the application to terminate, whereas Alt+F4 (or in my case, Alt+Esc) tells the window manager to close the window. If the application has crashed, then this will still allow the window manager to clean up, while Ctrl+Q would no longer work. So they are not one and the same thing.

1 Like

It seems that’s quite a popular official extension. Also, we already manually format Announcements posts the same way, so that may help.

I don’t know why it wouldn’t. Let’s find out! It’s now installed for testing.

For now it is only limited to T2 so everyone reading this topic can test.

2 Likes

Use syntax hint for better highlighting etc. (bash, html, and so on)
In your case above with headings, or anywhere else where it should be simplified, ‘text’ may be preferred.


# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

vs

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Seems legit [Testing] DiscoTOC.

It seems the profanity filters are not overly fond of Latin; or Cicero.

2 Likes