Forum ( discourse ) Text Formatting

Tags: #<Tag:0x00007fa0d02aaaa8> #<Tag:0x00007fa0d02aa710>

discourse - The Forum System

Boundless uses the discourse.org forum system to give it that sleek look. discourse basically say that if you want to format your text you can use:

Markdown, BBCode, or HTML to format.

However it’s never always that straight forward, and not everyone knows some or any of those things, so maybe here this can help a bit with the options that aren’t in the formatting bar, or perhaps aren’t so obviously available up there.

Formatting

This list isn’t exhaustive (yet), but to start you off, what follows are a few formatting tricks to do things that you thought might have been included but aren’t.


Center or Right Align Text

Ensure there is one line above and below the content that you wish to align, and above + below the `
` tags. Also, ensure that you've uploaded imagery that might be intended for the aligned content first, as I've seen issues there, sometimes needing to edit in aligning tags after the effect:
This allows you to place your text or images ...
<div align="center">

... in the centre / center of the post.

</div>

**SEE!**

This allows you to place your text or images …

… in the centre / center of the post.

SEE!


Headings

I’m using these in this very post, and we’re already on a second level. To use headings, place #'s at the start of the line, leave a space, then type.

#'s Heading Level HTML
# Main <h1>
## Second <h2>
### Third <h3>
#### Fourth <h4>
##### Fifth <h5>
###### Sixth <h6>

You can also use a few dashes to achieve a second level heading if you place it on the very next line of text.

Alternatively, you’ll see if you quote this post, that you can also use HTML headings, like so:

<h2 id="tabules">Tables</h2>
<h3 id="discTabz">Discourse Tables</h3>

Those obviously showing the tables below.

Tables

Discourse Tables

The above maybe make you wander about putting a basic table in a post, you can copy and paste from an excel/gSheet document and it should intepret it, but you can also do this:

|row 1|column 2|
|---|---|
|row 2|column 2|
|row 3|column 2|
|row 4|column 2|
header 1 header 2
row 2 column 2
row 3 column 2
row 4 column 2

If you want to align columns in particular ways, utilise that second row accordingly:

|:---|:---:|---:|
header 1 header 2 header 3
left centre right

HTML Tables

You can also use HTML table syntax to make a table, seen here making a lovely gallery from @Bonesscreenshots:

<div align="center">

<table><tr><td>

![20211228203633_1|690x388,25%](upload://86OoMLW0Lct95JJtx14uOpm83E2)

</td><td>

![20211228214854_1|690x388,25%](upload://v1I8P3Lbx0T2wcYwxCwe7AnyAOw)

</td></tr>
<tr><td colspan="2">

![20211227222128_1|690x388,25%](upload://avmMYHyA09WbJmvw1UJMyQDWfiV)

</td></tr>
</table>

</div>

You can use the HTML tags previously mentioned within the table to make things more interesting, like centering only certain cells.

I’ll work on colspan!


Superscript / Subscript

This is pretty simple actually:

<sup>Superscript</sup>

<sub>Subscript</sub>

Strikethrough

You can strikethrough with a double squirlygig:

~~strikethrough~~

… or use some BBCode to get Strikethrough:

[s]Strikethrough[/s]

Email Links

I believe that the URL button should do this, but if you want to adding an email link (like test@something.com) by hand use:

[email]test@something.com[/email]

Lists

You might not realise but there's more that you can do with lists ...
  • You Don’t Need To Number Your ‘Ordered’ Lists
  • Indented Number or Bullet Lists
  • Different List Types

You Don't Need To Number Your Lists

but you should

Basically, if you start each list line with a number one, it will automatically work out what you’re doing, I’ve done so in the next section as an example.

Indented Number or Bullet Lists

The easiest way to remember how to indent additional levels is to place four more spaces from where the * would usually be:

* First level bullet #1
    * Second level bullet
        * Third level bullet
* First level bullet #2
  • First level bullet #1
    • Second level bullet
      • Third level bullet
  • First level bullet #2
1. First level numbered #1
    1. Second level numbered #1
        1. Third level numbered #1
        1. Third level numbered #2
    1. Second level numbered #2
1. First level numbered #2
  1. First level numbered #1
    1. Second level numbered #1
      1. Third level numbered #1
      2. Third level numbered #2
    2. Second level numbered #2
  2. First level numbered #2

The actual system is: Whatever your first indent is, add again for further indents, but remembering 4 spaces is easier.

Different List Types

It doesn’t appear that it’s possible without addons. However, you can use the code spacing to do the job, albeit more messily:

`a.` Coffee
`b.`  Tea
`c.`  Milk

a. Coffee
b. Tea
c. Milk

Horizontal Rule

Just place three `***` or `---` on a line with a line of space on either side.

Fonts

Size, Colour, and Font Face

... are not really working in boundless discourse

It looks like this is either disabled on the boundless discourse, or I need to tweak it.

Here you can see a combination of size, color ( steaming that HTML lost the ‘u’ :wink: ), and an actual change of font:

<font face='Comic sans MS', size=7, color="red">Text</font>

Text

Other font stuff

This is just some other stuff that works:
<del>cola</del> <ins>wine</ins>

The following word uses a <big>big</big> typeface.

The following word uses a <small>small</small> typeface.

[bgcolor=#0000AF]Doesn't work boundless :-([/bgcolor]

cola wine

The following word uses a big typeface.

The following word uses a small typeface.

[bgcolor=#0000AF]Doesn’t work on boundless :-([/bgcolor]


Abbrieviations

Pretty simple, tbf:

<abbr title='to&nbsp;be&nbsp;fail'>tbf</abbr>

Keyboard Key Tags

As opposed to the code tags, if you wish to help someone with what to enter in some text, you can use the <kbd> which results in this kind of text indicating what’s needed to be typed.

Apparently these also work in [details] tags too, and look very much like a button! See @powbam’s example. However they need to be done using the ‘HTML’ alternative method for details, listed below.


Details ... Differently

OK, so you can have much more betterer [details] tags if you use the <details> method below shown with the above <kbd>button’ included:

<details><summary><kbd>Deets</kbd></summary>
Now you can *kiiiinda* format your details!
</details>
Deets Now you can *kiiiinda* format your details!

Table of Contents

... are not really working in boundless discourse

HTML Anchors

Unfortunately for full HTML anchor linking to work, discourse needs to not strip ID attribute tags from a header’s input. So you can’t use id or name in your header tags like I have throughout this and have that mean anything.

BBCode Anchors & Links

So that means that BBCODE’s anchor and link tags ( [aname=name]text[/aname] anchor names and [jumpto=name]text[/jumpto] internal links ) are the simplest way to do things, right?

Well, they would be if this forum supported it, but it doesn’t have the appropriate add-ons. So not to worry. Still, these should help jump around a bit if/when it is implemented.

If/when that happens, then most discourse & markdown formatting work (header ### tags, bold * stars, etc.) and some HTML:

[aname=abovez]Return example[/aname] is where the return link will come back to.

This will *jump* to *[jumpto=htmlTabzo]HTML Tables[/jumpto]*.

<sub> [aname=htmlTabzo]Link for[/aname] example [jumpto=abovez]above[/jumpto].</sub>

[aname=abovez]Return example[/aname] is where the return link will come back to.

This will ‘jump’ to [jumpto=htmlTabzo]HTML Tables[/jumpto].

HTML & Markdown Links

You [s]can[/s] use HTML or Markdown links to jump to a pre-defined anchor.

Type

Code

Example

HTML

<a href="#htmlTabzo">link</a>

Markdown

[HTML Tables](#htmlTabzo)



Notes

  • This is just for information, if you have stuff to add, I’ll edit it in no probs, but if this doesn’t get too chatty, then the posts can just be the info, and I’ll link to them eventually up here.
  • I searched pretty hard and couldn’t find an ‘in forum’ guide to formatting. If this already exists then at the very least, I’ll use it as my own notepad so I know.
  • I’m knackered now, if / when I find more stuff I’ll update this.
2 Likes

Updated with:

  • Fonts (minor)
  • Abbrieviations
  • Key Tags
  • Different details (and BUTTONS)
  • HTML Tables
2 Likes