Forum ( discourse ) Text Formatting

Tags: #<Tag:0x00007fa0df8d9e88> #<Tag:0x00007fa0df8d9d70>

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.

Contents

Center or Right Align Text

top | section | end

Ensure there is one line above and below the content that you wish to align, and above + below the <div> 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

top | section | end

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.

However, as I discussed in the minimised section at the end, adding ID’s so that you can link to them will do nothing in terms of linking them and ‘name’ doesn’t work either. So you need to use anchors.

more...

You need to use the markdown #'s and replace spaces with a dash (-) then you can link to them. Here’s how you could link to the below second level header of Links and Anchors (proper):

<a href="#Links-and-Anchors-(proper)">Links and Anchors (proper)</a>

Although, that doesn’t appear to work … technically Discourse should provide an option next to a header to link to it, but perhaps that’s something that needs to be enabled at Boundless discourse HQ. :+1: Might have to rely on hidden anchors … see below.

Links and Anchors (proper)

top | section | end

OK, so you know that to make a title you use # the title and either click the link button and type #the-title or you just suffer. :sweat_smile:

What about other methods? Well, you can actually hide an ‘anchor’ on the page by using:

<a name="thisPart"></a>

That will not be seen, and then whenever I wish to link to that part of the ‘document’ I can just link to it easily in the button or by typing:

<a href="#thisPart">thisPart</a>

Which produces:

thisPart

So, now you could technically continue to use HTML headers, and then additionally add a hidden anchor point just before it or on the same line.

Tables

top | section | end

So now you may wish to put a basic table in a post, and there’s a few ways:

  1. Copy Excel
  2. Make Your Own Discourse Tables
  3. Use HTML Tables

Copy Excel

top | section | end

Simply copy an excel sheet (or tab separated values) and paste them into the editor. Boom. Table.

Discourse Tables

top | section | end

You can also literally type out your own tables, purely using the below code:

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

That makes this:

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

top | section | end

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, but I’m still not quite nailing this part.

I’ll work on colspan!

Superscript / Subscript

top | section | end

This is pretty simple actually:

<sup>Superscript</sup>

<sub>Subscript</sub>

Strikethrough

top | section | end

You can strikethrough with a double squirlygig:

~~strikethrough~~

… or use some BBCode to get Strikethrough:

[s]Strikethrough[/s]

Email Links

top | section | end

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

top | section | end

You might not realise it, but using more than just simple lists is quite easy in discourse …

You Don't Need To Number Your Lists but you should

top | section | end

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

top | section | end

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

top | section | end

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

top | section | end

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


Fonts

top | section | end

Not every element of the fonts stuff works here, but hopefully some of this can help.

Size, Colour, and Font Face

top | section | end
... 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

top | section | end

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]

<font style="font-variant: small-caps;"> small caps doesn't work </font>

cola wine

[bgcolor=#0000AF]Background colour doesn’t work on boundless discourse[/bgcolor]

small caps doesn’t work on boundless discourse

Big Small

top | section | end

Separated out for searching more easily, the tags allow you to incrementally grow or shrink text:

The following word uses a <big>big</big> typeface, but this uses a <big><big>BIG big</big></big> typeface!

The following word uses a <small>small</small> typeface, but this one uses a <small><small> SMALL small </small></small> typeface.

The following word uses a big typeface, but this uses a BIG big typeface!

Similarly, the following word uses a small typeface, but this one uses a SMALL small typeface.

Abbrieviations

top | section | end

Pretty simple, tbf:

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

Keyboard Key Tags

top | section | end

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

top | section | end

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>

Table of Contents & Anchor Links

top | section | end

So, this is some old text around making contents, and suchlike, it’s not technically working/up to date, and there’s probably more easier ways of understanding this all in the section. However, if you wish to read more on HTML Anchors, andn suchlike, then click the button for …

More on Contents

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.

If you wanted to use something like this, though, the next level three header ( <h3> ) looks like this in my code:

<h3 id="bbAnchorz">BBCode Anchors & Links</h3>

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.
3 Likes

Updated with:

  • Fonts (minor)
  • Abbrieviations
  • Key Tags
  • Different details (and BUTTONS)
  • HTML Tables
  • Separated out Small / Big to be more ‘findable’ …
  • Fully edited the thing to make a contents list, proper anchored links, and a top/end link, too.
4 Likes