1: Hello - 2: Concepts - 3: Sign-Up - 4: Posting - 5: This-Formatting
This post explains available formatting options.
It uses concepts and vocabulary explained on the curated journey to here. If anything is unexplained 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] –> Your text here
or **Your text here** –> Your text here
or __Your text here__ –> Your text here
- Italic
[i]Your text here[/i] –> Your text here
or *Your text here* –> Your text here
or _Your text here_ –> Your text here
- Strike through
[s]Your text here[/s] –> Your text here
or ~~Your text here~~ –> Your text here
- Underline
[u]Your text here[/u] –> Your text here
or Underline [ins]Your text here[/ins] –> Your text here
- Highlight
[background=green]Your text here[/background] –> 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] –>
Your text here
- Bold red on green
[b][color=red][background=green]Your text here[/b][/color][/background] –>
Your text here by nesting markup-tags
But that ends itself for some undeclared reason %~{
##### Code
A L1 Heading
==
A L2 Heading
-
Result
A L1 Heading
A L2 Heading
##### Code
|A Column|b Column|Column|Column|
|---|---|---|---|
| row1c1 | row1c2 | row | row |
| row2c1 | row2c2 | row | row |
Result
| A Column | B Column | Column | Column |
|---|
| row1c1 | row1c2 | row | row |
| row2c1 | row2c2 | row | row |
2222222222222222222222222222222222222
This is bsuccess
And /bsuccess
33333333
- Spoiler - Click to reveal:
>!spoiler Clicking reveals!< –> spoiler Clicking reveals
- Code `Preformatted Code to display not act on` –> `Preformatted Code to display not act on
- Escapes
\\ –> \ (2 slashes = an escaped slash
- Link
[Visible Text](https://google.com (The tooltip)) –> Visible Text
- Picture link
) –> 
<!-- should a comment but doesnt work -->
<>
- Picture link
) –> 
- 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] –>
[/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]
–>
Width 140 Left
[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
Width 380 Right
[Icenter]
Code
[IMG src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_1280.jpg"
title="Add the Title" alt="Alt Title" height="auto" width=200] Width 200 Center
[/Icenter]
-->
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]
–>
Picture Caption
444444444444444444444444444444444444444444444444444444
[pleft]this is your text
on two source but not when displayed lines[/pleft]
–>
this is your text
on two source but not when displayed lines
[pright] this is your text
on thee[/pright]
–>
this is your text
on thee
lines
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
explain [acronym title=This is an example] TEXT [/acronym] –> TEXT
explain [hr] –>
explain [float=right]This is the float right example[/float] –>
This is the float right example
explain [left]This is the left example[/left] –>
This is the left example
explain [center]This is the center example[/center] –>
This is the center example
explain [right]This is the right example[/right] –>
This is the right example
explain [justify]This is the justify example[/justify] –>
This is the justify example
explain [details="This is the details example"]This is the details example[/details] –>
This is the details example
explain [cloud type="other" title="title" url="link"] Insert Password or Remove Text "Password" [/cloud] –>
Insert Password or Remove Text “Password” explain [down link="URL" size="2KB" name="file.zip"] –>
[down link="URL" size="2KB" name="file.zip"]explain [audio mp3="URL"] –>
[audio mp3="URL"]explain [clip mp4="URL"] –>
[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|
explain [gdoc] [/gdoc] –>
explain [color=blue] Change text [/color] –> Change text
explain [size=18] Change text [/size] –> Change text
explain [pbar]Back-end,40% Complete,black,black,gray,1,40,20,0[/pbar] –>
Back-end,40% Complete,black,black,gray,1,40,20,0
explain [pbar]Front-end,30% Complete,black,blue,teal,1,30,10,80[/pbar] –>
Front-end,30% Complete,black,blue,teal,1,30,10,80
explain [pbar]Total,70% Complete,black,red,pink,1,70,5,40[/pbar] –>
Total,70% Complete,black,red,pink,1,70,5,40
explain <iframe style="border:none;" width="100%" height="370px" class="iframe_src" title="Iframe Example" src="Iframe URL"></iframe> –>
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
explain [tabs] –>
explain [tab="hi"]Hi[/tab] –>
Hi
explain [tab="hello"]Hello[/tab] –>
Hello
explain [/tabs] –>
Reveals GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
like: { prefix: ‘ ’, suffix: ‘ ’, trimFirst: true },
reply: { prefix: ‘ ’, suffix: ‘ ’, trimFirst: true },
login: { prefix: ‘ ’, suffix: ‘ ’, trimFirst: true },
Reveals x
- explain
[like]This is the like example[/like] –> This is the like example
- explain
[reply]This is the reply example[/reply] –> This is the reply example
- explain
[login]This is the login example[/login] –> This is the login example
- explain
[like]This is the like example[/like] –> This is the like example
- explain
[reply]This is the reply example[/reply] –> This is the reply example
- explain
[login]This is the login example[/login] –> 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
