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.
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
top | section | endEnsure 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 | endI’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. Might have to rely on hidden anchors … see below.
Links and Anchors (proper)
top | section | endOK, 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.
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:
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 | endSo now you may wish to put a basic table in a post, and there’s a few ways:
Copy Excel
top | section | endSimply copy an excel sheet (or tab separated values) and paste them into the editor. Boom. Table.
Discourse Tables
top | section | endYou 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 | endYou can also use HTML table syntax to make a table, seen here making a lovely gallery from @Bones’ screenshots:
<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 | endThis is pretty simple actually:
<sup>Superscript</sup>
<sub>Subscript</sub>
Strikethrough
top | section | endYou can strikethrough with a double squirlygig:
~~strikethrough~~
… or use some BBCode to get Strikethrough:
[s]Strikethrough[/s]
Email Links
top | section | endI 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 | endYou 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 | endBasically, 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 | endThe 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
- Second 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
- First level numbered #1
- Second level numbered #1
- Third level numbered #1
- Third level numbered #2
- Second level numbered #2
- Second level numbered #1
- 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 | endIt 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 | endJust place three ***
or ---
on a line with a line of space on either side.
Fonts
top | section | endNot 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’ ), and an actual change of font
:
<font face='Comic sans MS', size=7, color="red">Text</font>
Text
Other font stuff
top | section | endThis 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 | endSeparated 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 | endPretty simple, tbf:
<abbr title='to be fail'>tbf</abbr>
Keyboard Key Tags
top | section | endAs 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 | endOK, 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 | endSo, 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 |
|
|
Markdown |
|
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.