BBCode ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software. It was first introduced in 1998. The available "tags" of BBCode are usually indicated by square brackets (<code>[</code> and <code>]</code>) surrounding a keyword, and are parsed before being translated into HTML.
Tags
{| class="wikitable" style="width:100%; text-align:left;"
! style="width:40%;" | Example in HTML/CSS
! style="width:40%;" | BBCode
! style="width:20%;" | Output
|-
| <syntaxhighlight lang="html"><b>bolded text</b></syntaxhighlight> or
<syntaxhighlight lang="html"><span style="font-weight: bold;">bolded text</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[b]bolded text[/b]</syntaxhighlight>
| bolded text
|-
| <syntaxhighlight lang="html"><i>italicized text</i></syntaxhighlight> or
<syntaxhighlight lang="html"><span style="font-style: italic;">italicized text</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[i]italicized text[/i]</syntaxhighlight>
| italicized text
|-
| <syntaxhighlight lang="html"><u>underlined text</u></syntaxhighlight> or
<syntaxhighlight lang="html"><span style="text-decoration: underline;">underlined text</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[u]underlined text[/u]</syntaxhighlight>
|
|-
| <syntaxhighlight lang="html"><s>strikethrough text</s></syntaxhighlight> or
<syntaxhighlight lang="html"><del>strikethrough text</del></syntaxhighlight> or
<syntaxhighlight lang="html"><span style="text-decoration: line-through;">strikethrough text</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[s]strikethrough text[/s]</syntaxhighlight>
| <s>strikethrough text</s>
|-
| <syntaxhighlight lang="html"><a href="https://en.wikipedia.org">https://en.wikipedia.org</a></syntaxhighlight>
<syntaxhighlight lang="html"><a href="https://en.wikipedia.org">English Wikipedia</a></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[url]https://en.wikipedia.org[/url]</syntaxhighlight>
<syntaxhighlight lang="bbcode">[url=https://en.wikipedia.org]English Wikipedia[/url]</syntaxhighlight>
| <div class="plainlinks">https://en.wikipedia.org</div>
<div class="plainlinks">English Wikipedia</div>
|-
| <syntaxhighlight lang="html"><img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" alt="Example image"></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[img alt="Example image" ]https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png[/img]</syntaxhighlight>
| 172px|link=|alt=Example image
|-
| <syntaxhighlight lang="html"><img src="Smileys/Face-smile.svg" alt=":-)"></syntaxhighlight>
| <syntaxhighlight lang="bbcode">:)</syntaxhighlight> or <syntaxhighlight lang="bbcode">[:-)]</syntaxhighlight>
This would be another way to use the <syntaxhighlight lang="bbcode" inline>[img]url_img[/img]</syntaxhighlight> and must be pre-configured by the forum administrator.
| 24px|:-)|link=
|-
| <syntaxhighlight lang="html"><blockquote><p>quoted text</p></blockquote></syntaxhighlight> <syntaxhighlight lang="html"><blockquote><p>quoted text</p><cite>— author</cite></blockquote></syntaxhighlight>
<small>(Usually implemented in more advanced ways.)</small>
| <syntaxhighlight lang="bbcode">[quote]quoted text[/quote]</syntaxhighlight>
<syntaxhighlight lang="bbcode">[quote="author"]quoted text[/quote]</syntaxhighlight>
<small>(including optional <code>author</code>)</small>
| <blockquote><p>quoted text</p></blockquote> <blockquote><p>quoted text</p><cite>— author</cite></blockquote>
|-
| <syntaxhighlight lang="html"><pre><code>computer code</code></pre></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[code]computer code[/code]</syntaxhighlight>
| <code>computer code</code>
|-
| <syntaxhighlight lang="html"><pre>monospaced text</pre></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[pre]monospaced text[/pre]</syntaxhighlight>
| <pre>monospaced text</pre>
|-
| <syntaxhighlight lang="html"><span style="font-size:30px">Large Text</span></syntaxhighlight> or <syntaxhighlight lang="html"><span style="font-size:85%">Smaller Text</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[style size="30px"]Large Text[/style]</syntaxhighlight>
<syntaxhighlight lang="bbcode">[style size="85"]Smaller Text[/style]</syntaxhighlight>
or
<syntaxhighlight lang="bbcode">[size="30px"]Large Text[/size]</syntaxhighlight>
<syntaxhighlight lang="bbcode">[size="85"]Smaller Text[/size]</syntaxhighlight>
<small>(The unit of measurement varies with each BBCode variant and could represent pixels, points, or relative HTML sizes.)</small>
| <div style="font-size:30px;">Large Text</div>
<div style="font-size:85%;">Smaller Text</div>
|-
| <syntaxhighlight lang="html"><span style="color:fuchsia;">Text in fuchsia</span></syntaxhighlight> or
<syntaxhighlight lang="html"><span style="color:#FF00FF;">Text in fuchsia</span></syntaxhighlight>
| <syntaxhighlight lang="bbcode">[style color="fuchsia"]Text in fuchsia[/style]</syntaxhighlight> or
<syntaxhighlight lang="bbcode">[style color=#FF00FF]Text in fuchsia[/style]</syntaxhighlight> or
<syntaxhighlight lang="bbcode">[color=#FF00FF]Text in fuchsia[/color]</syntaxhighlight>
<small>(Both HTML color names and hexadecimal color values are generally supported, although on some boards, you must omit the <code>#</code> from selecting a hexadecimal color.)</small>
| <span style="color:fuchsia;">Text in fuchsia</span>
|-
| <syntaxhighlight lang="html">
<ul>
<li>Entry A</li>
<li>Entry B</li>
</ul>
<ol>
<li>Entry 1</li>
<li>Entry 2</li>
</ol>
</syntaxhighlight>
| <syntaxhighlight lang="bbcode">
[list]
[*]Entry A
[*]Entry B
[/list]
[list=1]
[*]Entry 1
[*]Entry 2
[/list]
</syntaxhighlight>
Some message boards do not need the square brackets around the markers.
<small>(Many variants for <code>li</code> and <code>/li</code>, list types – unordered and ordered, with different bullets or counter formats – etc.)</small>
|
- Entry A
- Entry B
- Entry 1
- Entry 2
|-
| <syntaxhighlight lang="html">
<table>
<tr>
<th>column header 1</th>
<th>column header 2</th>
</tr>
<tr>
<td>table cell 1</td>
<td>table cell 2</td>
</tr>
</table>
</syntaxhighlight>
| <syntaxhighlight lang="bbcode">
[table]
[tr]
[th]column header 1[/th]
[th]column header 2[/th]
[/tr]
[tr]
[td]table cell 1[/td]
[td]table cell 2[/td]
[/tr]
[/table]
</syntaxhighlight>
<small>(Some variants for <code>thead</code>, rules, etc.)</small>
|
{| class="wikitable"
|-
! column header 1 !! column header 2
|-
|table cell 1 || table cell 2
|}
|-
| colspan="3" style="text-align: center;" | Source:
|}
Implementation
BBCode is typically implemented by applying a series of regular expression string-replace operations upon the input. Because regular expressions are limited in analyzing the structure of text input, this has the artifact that any non-hierarchical BBCode input will be transformed into invalid non-hierarchical HTML without error.
Applying traditional parsing techniques is made difficult by ambiguities in the markup, such as in , where the input can either be interpreted as "text" quoted from someone called , or the bolded text "text" surrounded by and , i.e. <code>[quote=text[/quote]</code>.
See also
Other lightweight markup languages:
- Wikitext
- Markdown