1: Hello - 2: Concepts - 3: Sign-Up - 4: Posting - 5: This-Formatting
This post Example Codes available formatting options.
It uses concepts and vocabulary Example Codeed on the curated journey to here. If anything is unExample Codeed then have you skipped steps? Use the links above to check đ
This is a
Work in Progress
Mostly it is an inconsistency finding experiment!
I have found the formatting capabilities of the forum capable of sophisticated layouts BUT I have also found the process of creating them poorly supported and very subject to bugs(?features!), trial and lots off error
Keeping it simple is the easiest option!
The buttons at the lower edge of the Composer/ Editor Window insert the formatting codes for you. I find setting up keyboard macros is more convenient. Inserting codes by hand works too.
I DONâT know what the definitive list is
I DO KNOW that interactions create unexpected results - its not regular or reliable đ
Some codes effectâs will span across new-lines including blank lines and others wonât. Some span across other tags in ways not âsupportedâ by the âofficial html definitionâ
Generally(?!) white space included in the source post (spaces, newline etc) are collapsed into a single whitespace on display. Tab characters typed are intercepted by the software so need to be pasted to insert them
White space IS used to determine indent levels for lists and âDetail_Reveal on clickâ
11111111111111111111111111111111111111
The Simple Ones
Headings 1-6 #
- Bold
[b]Your text here[/b]
Resultâ> Your text here
or **Your text here**
Resultâ> Your text here
or __Your text here__
Resultâ> Your text here
- Italic
[i]Your text here[/i]
Resultâ> Your text here
or *Your text here*
Resultâ> Your text here
or _Your text here_
Resultâ> Your text here
- Strike through
[s]Your text here[/s]
Resultâ> Your text here
or ~~Your text here~~
Resultâ> Your text here
- Underline
[u]Your text here[/u]
Resultâ> Your text here
or Underline [ins]Your text here[/ins]
Resultâ> Your text here
- Highlight
[background=green]Your text here[/background]
Resultâ> Your text here
Note being nested in a [notice] tag some how causes the unwanted UpperCase %~{
For a list of valid colours see https://www.w3schools.com/tags/ref_colornames.asp or for hex codes see here
So turning notice off
- Font-color
[color=red]Your text here[/color]
Resultâ>
Your text here
- Bold red on green
[b][color=red][background=green]Your text here[/b][/color][/background]
Resultâ>
Your text here by nesting markup-tags
But that ends itself for some undeclared reason %~{
Heading option with â=â and â-â
Example Code
A L1 Heading w/ "="
==
And a L2 Heading w/ "-"
-
Result Heading option with â=â and â-â
A L1 Heading w/ â=â
And a L2 Heading w/ â-â
Table Code
|A Column|b Column|Column|Column|
|---|---|---|---|
| row1c1 | row1c2 | row | row |
| row2c1 | row2c2 | row | row |
Table Result
| A Column | B Column | Column | Column |
| row1c1 | row1c2 | row | row |
| row2c1 | row2c2 | row | row |
2222222222222222222222222222222222222
This is bsuccess
And /bsuccess
333333333333333333333333333333333333333333333333333333333333333333
- Spoiler code - Click to reveal:
>!spoiler Clicking reveals!<
Resultâ> spoiler Clicking reveals
- Code code `Preformatted Code to display not act on`
Resultâ> `Preformatted Code to display not act on
- Escapes
\\
Resultâ> \ (2 slashes = an escaped slash
- Link format
[Visible Text](https://google.com (This is a tooltip - hoover on the link))
Link Resultâ> Visible Text
- Picture link
)
Resultâ> 
<!-- should a comment but doesnt work -->
Gray blank line Created by ```
- Picture link
)
Resultâ> 
- image link
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg" title="this is the Title" alt="Alt Title" height= width=100]
Resultâ> 
[/bnotice]
3333333333333333333333333333333333333
Image alignment
[Ileft][IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title="A Title" alt="Alt Title" height="auto" width=140] Width 140 Left
[/Ileft]
Result--> [Ileft][IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title=âA Titleâ alt=âAlt Titleâ height=âautoâ width=140] Width 140 Left
[/Ileft]
[Iright]
Code
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title="the Title" alt="Alt Title" height="auto" width=380] Width 380 Right
[/Iright]
Result--> ```
[Iright]
Result
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title="the Title" alt="Alt Title" height="auto" width=380] Width 380 Right
[/Iright]
Code
Width 200 Center
Result--> ```
Result
Width 200 Center
[/Icenter]
And those 3 again L & R & C
Width 140 Left
Width 380 Right
Width 200 Center
111122234567890123456789012345678901234567890123456789012345678901234567890
[iright][upl-image-preview uuid=64a27152-06e0-4fb4-ae6d-4f0b94571575
url=https://big-exams.logicalmodel.net/flarum/public/assets/files/2025-01-09/1736422887-85489-bigmobilemenuaccessshort1.jpg
alt={TEXT?}]Picture Caption[/iright]
Result--> [iright][upl-image-preview uuid=64a27152-06e0-4fb4-ae6d-4f0b94571575
url=
alt={TEXT?}]Picture Caption[/iright]
444444444444444444444444444444444444444444444444444444
[pleft]this is your text
on two source but not when displayed lines[/pleft]
Result--> [pleft]
this is your text
on two source but not when displayed lines
[/pleft]
[pright] this is your text
on thee[/pright]
Result--> [pright]
this is your text
on thee
lines
[/pright]
5555555555555555555555555555555
Lists ((A Massive Section)
Bulleted
The code block produces the formatted output below it
- Top level item starts at the beginning of the line(SoL). SoL is shown here as ^ So"^- Top le..."
Which shows there is NO space between the SoL and the "-" but there is between the "-" and the text that follows
The continuation lines start "^Which shows there i...."
- 2[sup]nd[/sup] Top level item also starts without a space before the "-" as in "^-2...
continuation text at top level start "^cont..."
- Second level starts "^ - Seco..." IE a Leading space before the "-"
continuation text at 2nd level starts "^text..." - it **inherits** indent level
- Level 3 took 5 leading paces ! :( it starts "^ - Text..."
but continuation text inherits the line before's indent level
- level 4 takes 9 spaces It starts "^ - text..."
and so on (you'll have to experiment!
- reset with "^- "text
- Top level item starts at the beginning of the line(SoL). SoL is shown here as ^ So"^- Top leâŚ"
Which shows there is NO space between the SoL and the â-â but there is between the â-â and the text that follows
The continuation lines start âWhich shows there iâŚ.â
- 2nd Top level item also starts without a space before the â-â as in "^-2âŚ
continuation text at top level start âcontâŚâ
- Second level starts â^ - SecoâŚâ IE a Leading space before the â-â
continuation text at 2nd level starts âtextâŚâ - it inherits indent level
- Level 3 took 5 leading paces ! đ it starts â^ - TextâŚâ
but continuation text inherits the line beforeâs indent level
- level 4 takes 9 spaces It starts â^ - textâŚâ
and so on (youâll have to experiment!
- reset with "^- "text
Numbered
Again the code blocks rendering is shown after it đ
1. Top level item starts at the beginning of the line shown here as ^ with "^1. text..."
- 2nd Top level item
continuation text at top level start "^text..."
1. Second level starts "^ 1. Text..." IE a leading space
continuation text as 2nd level starts "^text..." - it inherits indent level
1. 2nd pt at 2nd level - It start "^ 1. text..."
1. Level 3 took 5 leading paces ! :( it starts "^ 1. Text..."
1. Level 3 point 2
but continuation text inherits the line before's indent level
1. level 4 takes 9 spaces It starts "^ - text..."
and so on (you'll have to experiment!)
1. reset with "^1. "text
- Top level item starts at the beginning of the line shown here as ^ with â1. textâŚâ
- 2nd Top level item
continuation text at top level start âtextâŚâ
- Second level starts â^ 1. TextâŚâ IE a leading space
continuation text as 2nd level starts âtextâŚâ - it inherits indent level
- 2nd pt at 2nd level - It start â^ 1. textâŚâ
- Level 3 took 5 leading paces ! đ it starts â^ 1. TextâŚâ
- Level 3 point 2
but continuation text inherits the line beforeâs indent level
- level 4 takes 9 spaces It starts â^ - textâŚâ
and so on (youâll have to experiment!)
- reset with "1. "text
Also more exotic!
1st the code block then how it displays
[list type=A]
[*]An upper case alphabetic
[*]item
[*]item - Now leading spaces don't have any effect. To nest requires another \[list\] without a \[/list\] tag
[list type=a start=134]
[*]Now a nested list enumerated with lowercase sequence identifiers.
And starting at a chosen index that does'nt have to be <27!
[*]item
[list type=i start=3]
[*]A further indented nested list with lower case Roman Numerals
[*]item
[*]Leading spaces still NOT having effect with this syntax
A continuation line to says I'll end this level and start at the same level with Roman UpperCase
[/list][list type=I start=2025]
[*]Roman numerals starting at 2025 but 4999 is the limit !
[*]item
[list type=lower-greek start=1]
[*]lower case greek supports up to nine digits!
[*]item
[*]item
[list type=a]
[*]Item
[*]item
[list type=i]
abc
[/list][/list]
[/list][list type=i]
abc[/list]
[/list][/list][/list]
Now How it looks in a post
An upper case alphabetic
item
item - Now leading spaces donât have any effect. To nest requires another [list] without a [/list] tag
Now a nested list enumerated with lowercase sequence identifiers.
And starting at a chosen index that doesânt have to be <27!
item
A further indented nested list with lower case Roman Numerals
item
Leading spaces still NOT having effect with this syntax
A continuation line to says Iâll end this level and start at the same level with Roman UpperCase
Roman numerals starting at 2025 but 4999 is the limit !
item
lower case greek supports up to nine digits!
item
item
Item
item
abc
abc
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
Example Code [acronym title=This is an example] TEXT [/acronym]
Resultâ> TEXT
Example Code [hr]
Resultâ>
Example Code [float=right]This is the float right example[/float]
Resultâ>
This is the float right example
Example Code [left]This is the left example[/left]
Resultâ>
This is the left example
Example Code [center]This is the center example[/center]
Resultâ>
This is the center example
Example Code [right]This is the right example[/right]
Resultâ>
This is the right example
Example Code [justify]This is the justify example[/justify]
Resultâ>
This is the justify example
Example Code [details="This is the details example"]This is the details example[/details]
Resultâ>
This is the details example
Example Code [cloud type="other" title="title" url="link"] Insert Password or Remove Text "Password" [/cloud]
Resultâ>
Insert Password or Remove Text âPasswordâ
Example Code [down link="URL" size="2KB" name="file.zip"]
Resultâ>
[down link="URL" size="2KB" name="file.zip"]
Example Code [audio mp3="URL"]
Resultâ>
[audio mp3="URL"]
Example Code [clip mp4="URL"]
Resultâ>
[clip mp4="URL"]
Tables EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
###### Code
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| row 1 | row 2 | row 3 | row 4 |
Result
| Column 1 | Column 2 | Column 3 | Column 4 |
| row 1 | row 2 | row 3 | row 4 |
| R1C1 | C2 | c3 | C4 |
| C1 | r2C2 | c3 | C4 |
Example Code [gdoc] [/gdoc]
Resultâ>
Example Code [color=blue] Change text [/color]
Resultâ> Change text
Example Code [size=18] Change text [/size]
Resultâ> Change text
Example Code [pbar]Back-end,40% Complete,black,black,gray,1,40,20,0[/pbar]
Resultâ>
Back-end,40% Complete,black,black,gray,1,40,20,0
Example Code [pbar]Front-end,30% Complete,black,blue,teal,1,30,10,80[/pbar]
Resultâ>
Front-end,30% Complete,black,blue,teal,1,30,10,80
Example Code [pbar]Total,70% Complete,black,red,pink,1,70,5,40[/pbar]
Resultâ>
Total,70% Complete,black,red,pink,1,70,5,40
iframe Example code
<iframe style="border:none;" width="100%" height="370px" class="iframe_src" title="Iframe Example" src="Iframe URL"></iframe>
Resultâ>
Result
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
Tabbed âCardsâ
tab: { prefix: '\n[tabs]\n\n[tab="hi"]Hi[/tab]\n\n[tab="hello"]Hello[/tab]\n\n[/tabs]\n', trimFirst: true },
[tabs]
[tab="First"]
With Contents :)
[/tab]
[tab="Second"]
Alternate content
[Ileft]
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title="AddTitle" alt="AddTitle" height="auto" width=140] Width 140 Left
[/Ileft]
[/tab]
[tab=Lets miss the quote!]
and put a picture in
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg" ]
[/Ileft]
[/tabs]
With Contents đ
Alternate content
Width 140 Left
and put a picture in

Example Code [tabs]
Resultâ>
Example Code [tab="hi"]Hi[/tab]
Resultâ>
Hi
Example Code [tab="hello"]Hello[/tab]
Resultâ>
Hello
Example Code [/tabs]
Resultâ>
Reveals GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
like: { prefix: â â, suffix: â â, trimFirst: true },
reply: { prefix: â â, suffix: â â, trimFirst: true },
login: { prefix: â â, suffix: â â, trimFirst: true },
Reveals x
- Example Code
[like]This is the like example[/like]
Resultâ> This is the like example
- Example Code
[reply]This is the reply example[/reply]
Resultâ> This is the reply example
- Example Code
[login]This is the login example[/login]
Resultâ> This is the login example
- Example Code
[like]This is the like example[/like]
Resultâ> This is the like example
- Example Code
[reply]This is the reply example[/reply]
Resultâ> This is the reply example
- Example Code
[login]This is the login example[/login]
Resultâ> This is the login example
Stuff HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
# Notices IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
Code
[abasic]abasic
3
lines[/abasic]
[acustom]151515
two
lines[/acustom]
[ainfo]ainfo
two
lines[/ainfo]
[asuccess]asuccess
two
lines[/asuccess]
[awarning]awarning
two
lines[/awarning]
Displays As
abasic
3
lines
[acustom]151515
two
lines[/acustom]
ainfo
two
lines
asuccess
two
lines
awarning
two
lines
Code
[bcustom]343434[/bcustom]
[berror]berror[/berror]
[bnotice]bnotice[/bnotice]
[bsuccess]222222[/bsuccess]
[bwarning]212121[/bwarning]
Displays As
[bcustom]34
3434[/bcustom]
berror
next
line
bnotice
222222
212121
Code
[cerror]323232[/cerror]
[cnotice]313131[/cnotice]
[csuccess]333333[/csuccess]
[cwarning]242424[/cwarning]
Displays As
[cerror]323232[/cerror]
[cnotice]313131[/cnotice]
[csuccess]333333[/csuccess]
[cwarning]242424[/cwarning]
Code
[derror]414141[/derror]
[dnotice]353535[/dnotice]
[dsuccess]434343[/dsuccess]
[dwarning]424242[/dwarning]
Displays As
[derror]414141[/derror]
[dnotice]353535[/dnotice]
[dsuccess]434343[/dsuccess]
[dwarning]424242[/dwarning]
[cloud type=google title=title url=link]password[/cloud]
[cloud type=one title=title url=link]password[/cloud]
[cloud type=f title=title url=link]password[/cloud]
[cloud type=mega title=title url=link]password[/cloud]
[cloud type=dropbox title=title url=link]password[/cloud]
[cloud type=mediafire title=title url=link]password[/cloud]
[cloud type=lz title=title url=link]password[/cloud]
[cloud type=123 title=title url=link]password[/cloud]
[cloud type=ali title=title url=link]password[/cloud]
[cloud type=bd title=title url=link]password[/cloud]
[cloud type=ty title=title url=link]password[/cloud]
[cloud type=360 title=title url=link]password[/cloud]
[cloud type=ct title=title url=link]password[/cloud]
[cloud type=tx title=title url=link]password[/cloud]
[cloud type=kk title=title url=link]password[/cloud]
[cloud type=other title=title url=link]password[/cloud]
[cloud type=github title=title url=link]v1.0.0[/cloud]
[cloud type=gitee title=title url=link]v1.0.0[/cloud]
CONTENT
dropcase
left
right
centred
justified
ilift
iright
icenter
$config->BBCodes->addFromRepository('EMAIL');
$config->BBCodes->addFromRepository('CODE');
$config->BBCodes->addFromRepository('QUOTE', 'default', [
'authorStr' => '<xsl:value-of select="@author"/> <xsl:value-of select="$L_WROTE"/>'
]);
$config->BBCodes->addFromRepository('LIST');
//$config->BBCodes->addFromRepository('DEL');
$config->BBCodes->addFromRepository('COLOR');
$config->BBCodes->addFromRepository('CENTER');
$config->BBCodes->addFromRepository('SIZE');
$config->BBCodes->addFromRepository('*');
//Allowed BBCode ADD
$config->BBCodes->addFromRepository('ALIGN');
$config->BBCodes->addFromRepository('LEFT');
$config->BBCodes->addFromRepository('RIGHT');
$config->BBCodes->addFromRepository('JUSTIFY');
$config->BBCodes->addFromRepository('BACKGROUND');
$config->BBCodes->addFromRepository('SUB');
$config->BBCodes->addFromRepository('SUP');
$config->BBCodes->addFromRepository('DEL');
$config->BBCodes->addFromRepository('INS');
$config->BBCodes->addFromRepository('VAR');
$config->BBCodes->addFromRepository('DD');
$config->BBCodes->addFromRepository('FLOAT');
$config->BBCodes->addFromRepository('HR');
$config->BBCodes->addFromRepository('ACRONYM');
// Allowed HTML tags
$config->HTMLElements->allowUnsafeElement('iframe');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'style');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'src');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'scrolling');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'allow');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'allowpaymentrequest');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'credentialless');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'csp');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'height');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'loading');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'name');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'referrerpolicy');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'sandbox');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'width');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'align');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'frameborder');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'longdesc');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'marginheight');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'marginwidth');
$config->HTMLElements->allowUnsafeAttribute('iframe', 'scrolling');
header: { prefix: â### â },
bold: { prefix: ââ, suffix: ââ, trimFirst: true },
italic: { prefix: ââ, suffix: ââ, trimFirst: true },
strikethrough: { prefix: ââ, suffix: ââ, trimFirst: true },
quote: { prefix: â> â, multiline: true, surroundWithNewlines: true },
code: { prefix: â', suffix: '', blockPrefix: â', blockSuffix: '' },
link: { prefix: â[â, suffix: â](https://)â, replaceNext: âhttps://â, scanFor: âhttps?://â },
image: { prefix: ââ, replaceNext: âhttps://â, scanFor: âhttps?://â },
unordered_list: { prefix: â- â, multiline: true, surroundWithNewlines: true },
ordered_list: { prefix: â1. â, multiline: true, orderedList: true },
spoiler: { prefix: ââ, suffix: ââ, blockPrefix: â>! â, multiline: true, trimFirst: true },
left: { prefix: '[left] ', suffix: ' [/left]', trimFirst: true },
center: { prefix: '[center] ', suffix: ' [/center]', trimFirst: true },
right: { prefix: '[right] ', suffix: ' [/right]', trimFirst: true },
justify: { prefix: '[justify] ', suffix: ' [/justify]', trimFirst: true },
dropcap: { prefix: '[dropcap] ', suffix: ' [/dropcap]', trimFirst: true },
ileft: { prefix: '[ileft] ', suffix: ' [/ileft]', trimFirst: true },
iright: { prefix: '[iright] ', suffix: ' [/iright]', trimFirst: true },
pleft: { prefix: '[pleft] ', suffix: ' [/pleft]', trimFirst: true },
pright: { prefix: '[pright] ', suffix: ' [/pright]', trimFirst: true },
details: { prefix: '[details=TITLE] CONTENT ', suffix: '[/details]', blockPrefix: '[/details]', trimFirst: true },
cloud: { prefix: '[cloud type=other title=title url=link] Password ', suffix: '[/cloud]', trimFirst: true },
down: { prefix: '[down link="URL" size=2kB name=file.zip]', trimFirst: true },
audio: { prefix: '[audio mp3="URL"]', trimFirst: true },
clip: { prefix: '[clip mp4="URL"]', trimFirst: true },
table: { prefix: '\n| Column | Column | Column | Column |\n\n|---|---|---|---|\n\n| row | row | row | row |\n', trimFirst: true },
word: { prefix: '[gdoc] ', suffix: ' [/gdoc]', trimFirst: true },
size: { prefix: '[size=16] ', suffix: ' [/size]', trimFirst: true },
color: { prefix: '[color=red] ', suffix: ' [/color]', trimFirst: true },
//bold: { prefix: '**', suffix: '**', trimFirst: true },
//italic: { prefix: '_', suffix: '_', trimFirst: true },
//strikethrough: { prefix: '~~', suffix: '~~', trimFirst: true },
//quote: { prefix: '> ', multiline: true, surroundWithNewlines: true },
//code: { prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```' },
//link: { prefix: '[', suffix: '](https://)', replaceNext: 'https://', scanFor: 'https?://' },
//image: { prefix: '', replaceNext: 'https://', scanFor: 'https?://' },
//unordered_list: { prefix: '- ', multiline: true, surroundWithNewlines: true },
//ordered_list: { prefix: '1. ', multiline: true, orderedList: true },
//spoiler: { prefix: '>!', suffix: '!<', blockPrefix: '>! ', multiline: true, trimFirst: true },
};
}
insert audio/clip/word
[size=xx [/size]
color
Code to Insert Links
Todo
Code for Positioning Text
todo
1: Hello - 2: Concepts - 3: Sign-Up - 4: Posting - 5: This-Formatting