BBCode Guide

The BBCode supported on this MediaWiki is based on the BBCode implemented on F-List 2.0, which is in alpha at the time of writing this. The parser is still being worked on, so be aware that it might explode violently.

Enabling BBCode

The bbcode parser scans for any element that has the bbcode-target class attached to it. You should only attach this class to divs, because whatever you stick on it will get replaced with a div anyway.

Example usage:

<div class="bbcode-target">
   [b]Any bbcode inside the div will get parsed![/b]
</div>

Output:

[b]Any bbcode inside the div will get parsed![/b]

Differences from F-List

The parser is based on the 2.0 F-List BBCode, not the 1.0 BBCode. It supports [row], etc.

[heading] is no longer a block element and text can flow around it.

[col] can now accept [col=small], [col=medium], [col=large] instead of the meaningless 1, 2, and 3.

Inlines don't exist, use MediaWiki syntax instead.

Added [nobr] to cancel the next automatically inserted linebreak.

[collapse] doesn't exist - yet - it's a little more complicated to implement.

Added [ruby] because I wanted it. :>

How is it parsed? How does it handle MediaWiki formatting?

The parser is entirely clientside - running as javascript in your browser - and parses all html contained inside any bbcode-target div. This is done after all of MediaWiki's own formatting and parsing. This means anything generated by MediaWiki will get parsed by the bbcode parser too, and it also means you can use both of them with mediawiki taking precedent.

Example usage:

<div class="bbcode-target">
   Even though [b]this[/b] is [u]all[/u] bbcode, we can still use MediaWiki syntax like so: [[File:Ninnin-big-inverted.png|48px]]
</div>

Output:

Even though [b]this[/b] is [u]all[/u] bbcode, we can still use MediaWiki syntax like so: File:Ninnin-big-inverted.png

---

Due to the MediaWiki parser taking precedence, there are a few things that can be a little bit weird:

• Mediawiki automatically puts everything into a paragraph <p> block when you do two new lines. This is incredibly annoying for bbcode, so the bbcode parser quietly erases all paragraph tags before parsing. However, because of this sometimes it can remove more line breaks than you were expecting. If you want to force a linebreak you can use [br].
• Don't try to indent things in the editor to make things reasonable. Mediawiki thinks you're trying to make a block of text.
• <nowiki> is your friend!

Can I use HTML?

You should be able to! If you find something that breaks you should pester Nin-nin!

Can't you fix this by making the parser run before the Mediawiki parser?

Yes, and at some point I will probably end up doing this, but for now this was supposed to be a quick parser I could just slide into Mediawiki so that people can customise their sheets using a syntax they're more familiar with.

To make the parser run before the Mediawiki parser I have to implement it as an extension for Mediawiki.

This means re-implementing it in PHP, or at the very least something that transpiles to PHP.

[nobr][nobr]

Basic formatting

These formatting options all occur inline, they do not create a block or affect alignment.

[noparse][b]This bolds text[/b][/noparse]	[b]This bolds text[/b]
[noparse][i]This makes text italic[/i][/noparse]	[i]This makes text italic[/i]
[noparse][u]This gives text an underline[/u][/noparse]	[u]This gives text an underline[/u]
[noparse][s]This gives text a strikethrough[/s][/noparse]	[s]This gives text a strikethrough[/s]
[noparse][small]This makes text small[/small][/noparse]	[small]This makes text small[/small]
[noparse][big]This makes text big[/big][/noparse]	[big]This makes text big[/big]
[noparse][ruby=ruby]This[/ruby] lets you put text on top of [ruby=text]other text[/ruby]. [/noparse]	[ruby=ruby]This[/ruby] lets you put text on top of [ruby=text]other text[/ruby].
[noparse][heading]This makes text heading-like[/heading][/noparse]	[heading]This makes text heading-like[/heading]
[noparse][sub]This makes text submissive[/sub][/noparse]	[sub]This makes text submissive[/sub]
[noparse][sup]This makes text supmissive[/sup][/noparse]	[sup]This makes text supmissive[/sup]
[noparse][color=red]This gives text color[/color][/noparse]	[color=red]This makes text red[/color]
Supported colors: [color=white]white[/color] [color=black]black[/color] [color=red]red[/color] [color=blue]blue[/color] [color=yellow]yellow[/color] [color=green]green[/color] [color=pink]pink[/color] [color=gray]gray[/color] [color=orange]orange[/color] [color=purple]purple[/color] [color=brown]brown[/color] [color=cyan]cyan[/color] [noparse][color=#AF7A3A]24-bit color[/color][/noparse] = [color=#AF7A3A]24-bit color[/color] [noparse][color=#AF7A3A50]24-bit color + alpha[/color][/noparse] = [color=#AF7A3A50]24-bit color + alpha[/color][nobr][nobr]

Line breaks

These tags are special in not requiring a closing tag. It is invalid to do [/hr], [/br], or [/nobr].

[hr] Horizontal Rule	a[hr]b
[br] Line Break	a[br]b
[nobr] No line break	Prevents a line break being automatically added on the next new line.

Alignment

[left]Text on the left (default)[/left]	[left]Text on the left[/left]
[center]Text in the center[/center]	[center]Text in the center[/center]
[right]Text on the right[/right]	[right]Text on the right[/right]
[justify]Justify the contained text[/justify]	[justify]Justify doesn't seem like it's doing anything until you have so much text in a given paragraph that it starts to fill up the container it's inside, then it will try to make all the lines fill the box.[/justify]
[indent]Indent the text[/indent]	a[indent]b[/indent]

Columns and Rows

The syntax for a row is [row]up to 3 columns go here[/row]
The syntax for a column is [col=size]Contents go here.[/col] where size is any of small (25% of width), medium (33.33% of width), large (50% of width). The default is large.

Note that images currently do not scale well inside columns. I need to figure out how to fix this some time.

[hr]

[row][col=large]This is a large column on the left[/col] [col=large]This is a large column on the right[/col][/row] [hr] [row] [col=medium]This is a medium column on the left[/col] [col=medium]This is a medium column in the middle[/col] [col=medium]This is a medium column on the right[/col] [/row] [hr] [row] [col=small]This is a small column on the left[/col] [col=large]This is a large column in the middle. It fills up all the space between the left and right column like so.[/col] [col=small]This is a small column on the right[/col] [/row] [hr] [row] [col=large] This is a large column on the left with two columns inside. [row] [col=large][justify]This is a medium column on the left. As you can see, while you can do this it tends to get very cramped.[/justify][/col] [col=large][justify]This is a medium column in the middle. As you can see, while you can do this it tends to get very cramped.[/justify][/col] [/row] [/col] [col=large] This is a large column on the right with two columns inside. [row] [col=large][justify]This is a medium column on the left. As you can see, while you can do this it tends to get very cramped.[/justify][/col] [col=large][justify]This is a medium column in the middle. As you can see, while you can do this it tends to get very cramped.[/justify][/col] [/row] [/col]

[/row]

TODO

• Allow 4xsmall columns maybe.
• Fix how columns flex.
• A lot of other things I forgot
• Add a [img] tag that scales better with the browser like F-List 2.0 does.
• Implement [collapse=title]