Mecha CMS

Add extra functionality to the core engine.

BBCode

Table of Contents
  1. Usage 
  2. Syntax 
    1. Bold, Italic, Strike and Underline Text 
    2. Code 
    3. Image 
    4. List 
    5. Quote 
    6. URL 
    7. Smiley 

Convert BBCode syntax to HTML.

Download Version 1.0.2 Download Development Version

Something looks broken? We accept bounties to fix them faster.

BBCode is short for Bulletin Board Code. It is used as a way for formatting posts made on message boards, blogs and more. It is similar to HTML in the sense that in BBCode one does also use tags to format something specific (contained within the tag). In BBCode, tags are indicated by rectangular brackets surrounding a keyword, which is in turn transformed into HTML before being delivered to a web browser.

BBCode was implemented as method of providing a safer and easier way of allowing posts to be formatted on forums. Before BBCode forums sometimes allowed users to include HTML code in their posts, which had many security issues (i.e. the user could execute JavaScript code, break the layout of the site and so on). With BBCode being parsed by the forum scripts, it is easier to control what the user can do and can not do (allowing or not allowing specific BBCode tags).

This extension generates semantic HTML markup. Your site will be safe. All HTML code will be encoded in the output, whether it is written outside the code block or inside the code block, without exception.

Usage 

In your page header, add a type property with a value set to BBCode or text/bbcode:

---
title: Page Title
description: Page description.
author: Taufik Nurrohman
type: BBCode
...

This is a [b]bold[/b] text :)

Syntax 

Here are the supported syntax. I deliberately did not include the [color] and [size] syntax in this extension because it is too complex and makes the text unpleasant to read.

Bold, Italic, Strike and Underline Text 

[b]bold[/b]
[i]italic[/i]
[s]strike[/s]
[u]underline[/u]

Nesting is possible, but it won’t be as accurate as when using native HTML elements. In some cases, your syntax combination might damage each other.

[b][i]bold and italic[/i][/b]

Code 

BBCode syntax and smiley patterns written in the code block will not be touched by the parser. Language classes are supported on this extension to be combined with highlight extension and such.

[code]
Code goes here…
[/code]

[code=js]
JavaScript code goes here…
[/code]

Image 

For security reasons, this syntax will only display images when the image URL has an .apng, .gif, .jpeg, .jpg, .png, .svg or .webp extension at the end of the name.

[img]https://mecha-cms.com/path/to/image.jpg[/img]

List 

Add a number to turn the list into an ordered list. A given number greater than 1 will create a start attribute with a value of that number added to the generated <ol> element. Nesting lists is not possible at this time.

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

[list=1]
* List item 1
* List item 2
* List item 3
[/list]

[list=5]
* List item 1
* List item 2
* List item 3
[/list]

Several variant syntaxes for lists are available for compatibility reasons.

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

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

Quote 

[quote]
Important quote goes here…
[/quote]

URL 

[url]http://example.com[/url]
[url=http://example.com]Example[/url]

Smiley 

This extension supports a small set of smiley graphics to enhance the appearance without making them look excessive. No smiley code will be converted into images if it’s written in the HTML tags or in code blocks.

:cool: :grin: :hmm: :lol: :mad: :rolleyes: :sad: :smile: :straight: :tongue: :wink: :yikes:
8) 8-) B) B-)

:D :-D

:/ :-/ :\ :-\

x( x-( X( X-(

:( :-( :'( :'-(

:) :-)

:| :-|

:p :-p :P :-P

;) ;-)

:o :-o :O :-O