Formatting quick reference guide

010101

Flarum post formatting guide for your forum

Code: https://github.com/zerosonesfun/flarum-formatting-guide
Suggestion: Use the beginning two paragraphs in a help pop up and then link to the rest of the guide.

tolgaaaltas

010101 When i had a Flarum based website, i used (of course i gave reference) Pretpark.club's FAQ guide and translated into Turkish. It's simple and understandable but it requires FoF Formatting and FoF Upload.

clarkwinkelmann

There is this 2016 discussion which might be a bit outdated https://discuss.flarum.org/d/2991-how-to-use-markdown-and-bbcodes

TextFormatter documentation also includes a list of examples:

https://s9etextformatter.readthedocs.io/Plugins/BBCodes/Add_from_the_repository/#list-of-bundled-bbcodes
https://s9etextformatter.readthedocs.io/Plugins/Litedown/Syntax/

But probably not all bbcode in TextFormatter documentation are enabled by default in Flarum.

clarkwinkelmann

bold is **bold** or __bold__ while italics is *italics* or _italics_ (it's the number of asterisks or underscores that counts 😉 )

010101

clarkwinkelmann Turns out I need some sort of helper guide too. 😳

010101

There could be an issue with the [list] BBCode, unless I'm doing it wrong.

one
two
where's the bullet point?

How are you supposed to do it? Is this right or wrong?

[list]
one
two
where's the bullet point?
[/list]

And then only at my forum, unordered markdown lists aren't working.

interesting
ok
they work here

Probably an extension conflict I would guess...

clarkwinkelmann

010101

[list]
[*]item 1[/*]
[*]item 2[/*]
[/list]

item 1
item 2

Seems like having both Markdown and bbcode enabled causes to have <p>s inside of <li>s 😅 which is why there is so much space between the items.

010101

clarkwinkelmann Thanks! I very rarely make lists with BBCode.

clarkwinkelmann

010101 me too! I had to check the documentation for [*]

Markdown lists are just so much nicer. Markdown is so much more "intuitive" in its markup.

010101

Here’s a solution so that users can at least reference a few common formatting options anytime. Go to the codepen page below and copy/paste the html tab and the JavaScript tab into your custom footer in your Appearance settings. Then copy/paste the CSS into your custom CSS. Just in case you have little to no coding experience, for the JavaScript, don’t forget to wrap it in <script></script> tags. Edit the text if needed (at the very least the “learn more” link).

To see what you’ll get click the light grey circle/question mark in the bottom right of the white box below (if on mobile click the “result” button first):