BBCode

Converts BBCode syntax to HTML.

0 stars out of 5

00000
  • AuthorTaufik Nurrohman
  • Maintainer1
  • Member
  • Version2.0.2
Table of Contents
  1. Usage
  2. Syntax
    1. Bold, Italic, Strike and Underline
    2. Code
    3. Image
    4. List
    5. Quote
    6. URL
    7. Smiley

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 secure. All HTML code will be encoded in the output, no matter if it is written inside or outside 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 syntaxes. I intentionally did not include the [color], [size], and other decorative syntax in this extension because it is too complex and makes the text unpleasant to read.

Bold, Italic, Strike and Underline

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

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

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

Code

BBCode syntax and smiley patterns written in the code block are not 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 if the image URL has an .apng, .avif, .gif, .jpeg, .jpg, .png, .svg, or .webp extension at the end of the name:

[img]http://127.0.0.1/route/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 list syntax variants 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 it look excessive. No smiley code will be converted to images if it’s written in the HTML tags or 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

0 Comments

No comments yet.