Forum Academy Marketplace Showcase Pricing Features

Bubble Form (Discourse) Formatting Guide

Below is a guide to some advanced formatting for forum.bubble.io. If you’ve ever wanted to enhance the formatting this may be helpful. I’m posting here mainly for my own reference :-).
Enjoy.

Adapted from a post from @ben_hest, application engineer at Digikey for their implementation of discourse. Discourse is the forum engine that powers the bubble forum. Original post: https://forum.digikey.com/t/an-unofficial-discourse-user-reference-guide/1125


This is a “quick” how-to guide for using Discourse forum/community software. It contains a majority of the common features avialble to users/content editors, but may not have complete coverage of the featureset. If anyone sees anything to add or correct, feel free to comment. If you’d like to learn more about the Discourse Editor’s syntax take a look at the commonmark (a flavor of markdown) docs for more info.

Alternative text formatting

Typing

_italicized word_
~~strike-through word~~

Results in
italic
strike-through word

Alternatively, there’s some BBCode sytnax that a person can use
[b]like this[/b] like this
[i]or this[/i] or this
[u]underline[/u] underline
[s]strikethrough[/s] strikethrough

Escaping Characters

Sometimes you want to type certain text without triggering built-in formatting such as * or ` or > , etc

typing \*don't italicize this\* results in
*don’t italicize this*

Headings

# H1
## H2
### H3
#### H4
##### H5
###### H6

H1

H2

H3

H4

H5
H6

horizontal rule

typing ***
results in:


Keystrokes

Typing <kbd>crtl</kbd>+<kbd>k</kbd>

Results in:
crtl+k

Lists

You can use the editor buttons for orderedimage or unordered image lists.

1. First ordered list item
2. second list item
   * sub-lists are offset by three spaces      
1. Specific numbers 
1. don't matter they will auto increment
1. auto increment

* unordered lists 
* are also possible
  1. First ordered list item
  2. Explicit second list item
    • sub-lists are offset by three spaces
  3. Specific numbers
  4. don’t matter they will auto increment
  5. auto increment
  • unordered lists
  • are also possible

Code Formatting

Inline code formatting

Surround a section of code with backticks (`) inline code formatting.
Typing:
`var x = 10;`
Results in:
var x = 10;
This can also be done as var x = 10; inline.

Present entire line as code by prefixing four (4) spaces (an extra newline before this)
Typing:

    var this = “is a line”;

Results in :

var this = “is a line”;

Multi-Line Blocks of Code

Surrounding code with three backticks ``` will allow for code to span multiple lines
Typing:
```
function foo(bar){
return bar+1;
}
```
Results in:

function foo(bar){
    return bar+1;
}

Code-specific Syntax Highlighting
The code block will try to automatically choose a style for code, but you can explicitly call out the desired formatting.

Typing:
```javascript
function foo(bar){
return bar+1;
}
```
Results in:

function foo(bar){
    return bar+1;
}

Tables

Tables are second class citizens in Discourse, some of the formatting features and niceties work and some don’t.

Protip - The easiest way to get a table into discourse is to start a table in an spreadsheet, then copy & paste that table into the editor window. Discourse natively handles the format change and makes creating a table much easier. Excel and Google Sheets work great using this method.

A markdown table in Discourse needs at least the first two lines to exist:

|Color|Weight|Height|
|-|-|-|
|red|12|160|
|green|4|100|
Color Weight Height
red 12 160
green 4 100

Blockquotes

Blockquotes can be found in the editor bar button image
Puting a greater than sign > in front of so a line will create blockquotes
Typing:
> this is some blockquoted text
> this is another line of blockquoted text

this is not blockquoted

> this is another one

Results in:

this is some blockquoted text
this is another line of blockquoted text

this is not blockquoted

this is another one

HTML

Limited HTML is also supported in discourse. Most bbCode and discourse markdown can be accomplished in HTML as well. Beyond that there are a several useful HTML formatting tags which, AFAIK, aren’t supported with discourse markdown that is available on these forums.

function tag results in
superscript <sup> superscript
subscript <sub> subscript
keypresses <kbd> ctrl+c
’ ’ ’ ’ :grinning:
’ ’ ’ ’ bubble dynamic:expression
spaces &nbsp; some          spaces
line break <br> line

break
image <img>
<img src=“https://forum.bubble.io/uploads/default/original/3X/2/8/284...png” height=“50px”>
^^conveniently supports   height=__px
4 Likes

Great. Thanks for sharing :pray:

Added some HTML tricks. If anyone discovers other useful markdown or tags reply here and I’ll try to incorporate into the original post.