BBBBCode

Big Beautiful BBCode

Last updated: November 28, 2019 (Current version: 2.9.6 - "Michelangelo TMNT")

A Flarum extension which adds additional BBCodes. It is lightweight; all of the BBCodes are HTML and CSS only. However, currently a JavaScript polyfill is added which ensures that the spoiler BBCode will work in IE and Edge browsers. One day, this small bit of JavaScript may be removed if it is determined that it is no longer necessary.

Further down in this post you will find detailed instructions. But first so that you have an idea of what BBCodes are included, here are the codes you get with this extension (this list also shows which require a closing BBCode tag and which do not):

[tooltip][/tooltip]
[spoiler][/spoiler]
[blur][/blur]
[accordion][/accordion]
[chat]
[audio]
[action][/action]
[pop] (popup)
[red][/red] (also orange, yellow, green, blue, purple)
[hl][/hl] (highlight)
[kbd][/kbd] (html keyboard tag)
[space][/space] (sometimes you need an extra line break)
[background][/background] (added directly from s9e TextFormatter)
[font][/font] (added directly from s9e TextFormatter)
and table bbcode ([table],[thead],[tbody],[th],[tr],[td]) (added directly from s9e TextFormatter)

Also, remember, Flarum already has a core BBCode extension which is why this extension doesn't include any basics such as, [b]bold[/b], or other basic codes. This extends the core BBCode extension. Here are the BBCodes already included with Flarum core:
[b], [i], [u], [s], [url], [img], [email], [code], [quote], [list], [del], [color], [center], [size], [*]

Install

composer require zerosonesfun/bbbbcode

Update

1) composer update zerosonesfun/bbbbcode

2) Deactivate and reactivate the extension in your admin. This refreshes important files.

3) Go to your dashboard, click tools, click clear cache.

4) Clear your browser cache, and any other caches like Cloudflare, if applicable.

Uninstall

composer remove zerosonesfun/bbbbcode

Usage

The following BBCodes are available:

Tooltip:

[tooltip="your tip here" placement="right"]word[/tooltip]

(for "placement" you may use: top, bottom, left, right)

Result:

Spoiler:

[spoiler="Text you click on"]What you will see after clicking.[/spoiler]

Result:

Or, if you omit the “spoiler=“ part (the title) then the title of your spoiler will default to “Read More.”

Blurred Spoiler:

(Hover over, or if on mobile tap, to reveal.)

[blur]This is what happens at the end of the movie.[/blur]

Result:

Accordion:

[accordion header="YOUR HEADER TEXT"]The text that is hidden at first but then appears goes here[/accordion]
[accordion header="YOUR NEXT HEADER TEXT"]The text that is hidden at first but then appears goes here[/accordion]

(repeat the accordion BBCode as many times as needed)

Result:

Chat:

[chat-a="Why did the chicken cross the road?" who="Me"]
[chat-b="It was hungry?" who="Mary"]
[chat-a="No! Wrong!" who="Me"]
[space][/space]

(repeat as many times as needed alternating chat-a and chat-b)

("space" BBCode at end of chat is optional - it adds some extra space)

Result:

Action:

[action]Walks into a wall[/action]

Result:

(Image enlarged to show spinning asterisks. It’s a new take on the old chat room action format.)

Popup:

[pop button="Click Here" title="Hello" content="Thank you for being a friend."]

Result:

(By the way, the button you see here to close the popup... That's pretty much what the button looks like that you click on with your custom text to open the popup.)

Quick font colors & highlighter

New as of version 1.1.6 there are now quick font color codes and a highlight code. Yes, with the standard BBCode without this extension you can change font colors. But, these equal less keystrokes. So, it's a little faster to make a word red for example compared to the standard way.

Colors:
[red]text here[/red]... other colors available: [orange], [yellow], [green], [blue], [purple]

Highlight:
[hl]highlight this text[/hl]
(That's a "L" not a 1. It's hl for highlight.)

Result:

Audio:

[audio mp3="song.mp3" ogg="song.ogg"]
[audio mp3="song.mp3"]
[audio ogg="song.ogg"]
[audio m4a="song.m4a"]
[audio wav="song.wav"]
[audio flac="song.flac"]
[audio webm="song.webm"]
[audio mp3="song.mp3" width="50"]

(You may put a mp3 and ogg file together for maximum browser compatibility, or just post a mp3, ogg, wav, flac, webm, or m4a file alone. Also, as the last example shows, you may modify the width. The width will become a percentage and by default, if you choose not to declare a width, the player will be 100% width.)

Note: This audio BBCode is compatible with my SM2 audio extension. Feel free to use both! But, of course you would not want to use this plus my separate audio BBCode add-on. That would just add the audio BBCode code twice.

KBD (HTML Keyboard tag):

Please type [kbd]breathe[/kbd] in your reply.

Result:

Background, Font, Table:

For now I am not adding screenshots of these three. These are pretty basic and added directly from s9e TextFormatter.

GitHub: https://github.com/zerosonesfun/bbbbcode
Packagist: https://packagist.org/packages/zerosonesfun/bbbbcode