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.