BBCode: Difference between revisions
Miqrogroove (talk | contribs) No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
BBCode is an abbreviation for Bulletin Board Code. BBCode is essentially a series of tags that can be used to style or format text in posts. Examples of BBCode's uses are centered text, lists, varying font sizes and colors in posts. | BBCode is an abbreviation for ''Bulletin Board Code''. BBCode is essentially a series of tags that can be used to style or format text in posts. Examples of BBCode's uses are centered text, lists, varying font sizes and colors in posts. | ||
==The Basics== | ==The Basics== | ||
To use | To use BBCode you first need to know what the effect is you're trying to reach. For example, we want, in the following text: | ||
{{highlight | These few words in this text should be bold, while these should not}} | {{highlight | These few words in this text should be bold, while these should not}} | ||
| Line 16: | Line 16: | ||
A few basic rules for all bbcode: | A few basic rules for all bbcode: | ||
*all | *all BBCode must be closed, so having [a] means we also need to have [/a] which "closes" it. The only exception to this is when using [*] | ||
*although some bbcode can be used in a case-insensitive way (ie. you can use both [img][/img] and [IMG][/IMG], this is not guaranteed to work in all cases. To be on the safe side, try using it in lower-case if you can (ie. [b][/b] instead of [B][B]) to minimize processing time required to transform these to HTML. | *although some bbcode can be used in a case-insensitive way (ie. you can use both [img][/img] and [IMG][/IMG], this is not guaranteed to work in all cases. To be on the safe side, try using it in lower-case if you can (ie. [b][/b] instead of [B][B]) to minimize processing time required to transform these to HTML. | ||
==Text Formatting== | ==Text Formatting== | ||
<table | <table class="wikitable"> | ||
<tr> | <tr> | ||
<th style="width: 10%; border: 1px solid #000000"> Opening Tag </th><th style="width: 10%; border: 1px solid #000000"> Closing Tag </th><th style="width: 40%; border: 1px solid #000000"> Effect </th><th style="width: 40%; border: 1px solid #000000"> Additional Information</th></tr> | <th style="width: 10%; border: 1px solid #000000"> Opening Tag </th><th style="width: 10%; border: 1px solid #000000"> Closing Tag </th><th style="width: 40%; border: 1px solid #000000"> Effect </th><th style="width: 40%; border: 1px solid #000000"> Additional Information</th></tr> | ||
| Line 27: | Line 27: | ||
<td style="border: 1px solid #000000; text-align: center;"> [b] | <td style="border: 1px solid #000000; text-align: center;"> [b] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/b] | </td><td style="border: 1px solid #000000; text-align: center;"> [/b] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <b>Makes the enclosed text bold</b> | </td><td style="border: 1px solid #000000; text-align: center;"> <b>Makes the enclosed text bold.</b> | ||
</td><td style="border: 1px solid #000000; text-align: center;"> | </td><td style="border: 1px solid #000000; text-align: center;"> | ||
</td></tr> | </td></tr> | ||
| Line 39: | Line 39: | ||
<td style="border: 1px solid #000000; text-align: center;"> [u] | <td style="border: 1px solid #000000; text-align: center;"> [u] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/u] | </td><td style="border: 1px solid #000000; text-align: center;"> [/u] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <u>Makes the enclosed text underlined</u> | </td><td style="border: 1px solid #000000; text-align: center;"> <u>Makes the enclosed text underlined.</u> | ||
</td><td style="border: 1px solid #000000; text-align: center;"> | </td><td style="border: 1px solid #000000; text-align: center;"> | ||
</td></tr> | </td></tr> | ||
| Line 45: | Line 45: | ||
<td style="border: 1px solid #000000; text-align: center;"> [strike] | <td style="border: 1px solid #000000; text-align: center;"> [strike] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/strike] | </td><td style="border: 1px solid #000000; text-align: center;"> [/strike] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <strike>Strikes the enclosed text</strike> | </td><td style="border: 1px solid #000000; text-align: center;"> <strike>Strikes the enclosed text.</strike> | ||
</td><td style="border: 1px solid #000000; text-align: center;"> | </td><td style="border: 1px solid #000000; text-align: center;"> | ||
</td></tr> | </td></tr> | ||
| Line 51: | Line 51: | ||
<td style="border: 1px solid #000000; text-align: center;"> [blink] | <td style="border: 1px solid #000000; text-align: center;"> [blink] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/blink] | </td><td style="border: 1px solid #000000; text-align: center;"> [/blink] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <span style="text-decoration: blink;">Makes the enclosed text blink</span> | </td><td style="border: 1px solid #000000; text-align: center;"><span style="text-decoration: blink;">Makes the enclosed text blink.</span> | ||
</td><td style="border: 1px solid #000000; text-align: center;"> | </td><td style="border: 1px solid #000000; text-align: center;"> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td style="border: 1px solid #000000; text-align: center;"> [marquee] | <td style="border: 1px solid #000000; text-align: center;">[marquee] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/marquee] | </td><td style="border: 1px solid #000000; text-align: center;"> [/marquee] | ||
</td><td style="border: 1px solid #000000; text-align: center;" | </td><td style="border: 1px solid #000000; text-align: center;">Makes the enclosed text scroll right to left. | ||
</td><td style="border: 1px solid #000000; text-align: center;"> | </td><td style="border: 1px solid #000000; text-align: center;"> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td style="border: 1px solid #000000; text-align: center;"> [color=<b>X</b>] | <td style="border: 1px solid #000000; text-align: center;">[color=<b>X</b>] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/color] | </td><td style="border: 1px solid #000000; text-align: center;"> [/color] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> Changes the enclosed text color to <b>X</b> | </td><td style="border: 1px solid #000000; text-align: center;"> Changes the enclosed text color to <b>X</b>. | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> may be a hexadecimal RGB value (#000000 - #FFFFFF), rgb(0,0,0) - rgb(128,128,128), or any other standard CSS color value (Red, Green, etc). | </td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> may be a hexadecimal RGB value (#000000 - #FFFFFF), rgb(0,0,0) - rgb(128,128,128), or any other standard CSS color value (Red, Green, etc).<hr />As of XMB 1.10, the W3C Extended Color Set is supported. | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td style="border: 1px solid #000000; text-align: center;"> [size=<b>X</b>] | <td style="border: 1px solid #000000; text-align: center;"> [size=<b>X</b>] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/size] | </td><td style="border: 1px solid #000000; text-align: center;"> [/size] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> Changes the size of the enclosed text to <b>X</b> | </td><td style="border: 1px solid #000000; text-align: center;"> Changes the size of the enclosed text to <b>X</b>. | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <b> | </td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> is an offset form base-font-size. For example: If the forum font was set to 10pt, [size=]text[/size] would show "text" in 15pt font size. Size range is from -10 to 99. | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td style="border: 1px solid #000000; text-align: center;"> [font=<b>X</b>] | <td style="border: 1px solid #000000; text-align: center;"> [font=<b>X</b>] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/font] | </td><td style="border: 1px solid #000000; text-align: center;"> [/font] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> Changes the font of the enclosed text to <b>X</b> | </td><td style="border: 1px solid #000000; text-align: center;"> Changes the font of the enclosed text to <b>X</b>. | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> can be any font | </td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> can be any font.<hr />Prior to XMB 1.9.12.09, fonts with a "-" symbol could not be used.</td></tr> | ||
</td></tr> | |||
<tr> | <tr> | ||
<td style="border: 1px solid #000000; text-align: center;"> [align=<b>X</b>] | <td style="border: 1px solid #000000; text-align: center;"> [align=<b>X</b>] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> [/align] | </td><td style="border: 1px solid #000000; text-align: center;"> [/align] | ||
</td><td style="border: 1px solid #000000; text-align: center;"> Aligns the enclosed text to <b>X</b> | </td><td style="border: 1px solid #000000; text-align: center;"> Aligns the enclosed text to <b>X</b>. | ||
</td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> can be any <b>one</b> of the following: left, center, right, or justify. | </td><td style="border: 1px solid #000000; text-align: center;"> <b>X</b> can be any <b>one</b> of the following: left, center, right, or justify. | ||
</td></tr></table> | </td></tr></table> | ||
| Line 89: | Line 88: | ||
<table class="wikitable"> | <table class="wikitable"> | ||
<tr> | <tr> | ||
<th style="width: 10%;"> | <th style="width: 10%;">Opening Tag</th><th style="width: 10%;">Closing Tag</th><th style="width: 40%;">Effect</th><th style="width: 40%;">Additional Information | ||
</th></tr> | </th></tr> | ||
<tr> | <tr> | ||
<td> [quote] </td><td> [/quote] </td><td> <table style="border: 1px solid #FFFFFF; margin: 15px auto 10px auto; width: 80%;"><tr><td style="background-color: #737373; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; height: 20px; padding-left: 5px;">Quote:</td></tr><tr><td style="background-color: #EFEFEF; color: #2E3E55; font-family: Verdana, Arial, Helvetica; font-size: 10px; padding: 10px 0 20px 5px;">Quotes this text</td></tr></table> </td><td> When a quote is generated by XMB, the first line usually contains the author of the quoted post: [i]Originally posted by EXAMPLE:[/i] | <td> [quote] </td><td> [/quote] </td><td> <table style="border: 1px solid #FFFFFF; margin: 15px auto 10px auto; width: 80%;"><tr><td style="background-color: #737373; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; height: 20px; padding-left: 5px;">Quote:</td></tr><tr><td style="background-color: #EFEFEF; color: #2E3E55; font-family: Verdana, Arial, Helvetica; font-size: 10px; padding: 10px 0 20px 5px;">Quotes this text</td></tr></table></td><td> When a quote is generated by XMB, the first line usually contains the author of the quoted post: [i]Originally posted by EXAMPLE:[/i] | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [code] </td><td> [/code] </td><td> <table style="border: 1px solid #FFFFFF; margin: 15px auto 10px auto; width: 80%; white-space: pre;"><tr><td style="background-color: #737373; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; height: 20px; padding-left: 5px;">Code:</td></tr><tr><td style="background-color: #EFEFEF; color: #2E3E55; font-family: Courier New; font-size: 10px; padding: 10px 5px 10px 5px; white-space: pre;"> | <td>[code]</td><td> [/code] </td><td> <table style="border: 1px solid #FFFFFF; margin: 15px auto 10px auto; width: 80%; white-space: pre;"><tr><td style="background-color: #737373; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; height: 20px; padding-left: 5px;">Code:</td></tr><tr><td style="background-color: #EFEFEF; color: #2E3E55; font-family: Courier New; font-size: 10px; padding: 10px 5px 10px 5px; white-space: pre;">while(true) { | ||
printf("Hello World!"); | |||
}</td></tr></table> </td><td> Text enclosed in [code][/code] BBCode will preserve whitespace and will be shown in monotype font (so all characters have the same width and height). Smilies and other BBCode will not be parsed inside [code][/code] tags. | |||
</td></tr></table> | </td></tr></table> | ||
| Line 102: | Line 103: | ||
<table class="wikitable"> | <table class="wikitable"> | ||
<tr> | <tr> | ||
<th style="width: 10%;"> | <th style="width: 10%;">Opening Tag</th><th style="width: 10%;">Closing Tag</th><th style="width: 40%;">Effect</th><th style="width: 40%;">Additional Information | ||
</th></tr> | </th></tr> | ||
<tr> | <tr> | ||
<td> [img] </td><td> [/img] </td><td> [content is replaced with the image] </td><td> | <td> [img] </td><td> [/img] </td><td>[content is replaced with the image]</td><td> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [img=AxB] </td><td> [/img] </td><td> [content is replaced with the image, resized to AxB px] </td><td> | <td> [img=AxB] </td><td> [/img] </td><td>[content is replaced with the image, resized to AxB px]</td><td> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [url] </td><td> [/url] </td><td> link to the | <td> [url] </td><td> [/url] </td><td>link to the URL provided.</td><td> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [url=?] </td><td> [/url] </td><td> the text provided, linking to | <td> [url=?] </td><td> [/url] </td><td> the text provided, linking to URL.<b>URL</b> </td><td> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [email] </td><td> [/email] </td><td> link to the email provided </td><td> | <td> [email] </td><td> [/email] </td><td> link to the email provided.</td><td> | ||
</td></tr> | </td></tr> | ||
<tr> | <tr> | ||
<td> [email=?] </td><td> [/email] </td><td> the text provided, linking to email <b>email</b> </td><td> | <td> [email=?] </td><td> [/email] </td><td> the text provided, linking to email <b>email</b>.</td><td> | ||
</td></tr></table> | </td></tr></table> | ||
<tr> | |||
<td style="border: 1px solid #000000; text-align: center;">[youtube] | |||
</td><td style="border: 1px solid #000000; text-align: center;"> [/youtube] | |||
</td><td style="border: 1px solid #000000; text-align: center;"> Embeds a YouTube link. Added in XMB 1.9.12. | |||
</td><td style="border: 1px solid #000000; text-align: center;">The tag supports raw video IDs, youtu.be, youtube.com and m.youtube.com URLs. | |||
</td></tr> | |||
[list] Text Here [/list] - This will create a list from the text, in bullet points.<br /> | [list] Text Here [/list] - This will create a list from the text, in bullet points.<br /> | ||
[poem] Text Here [/poem] - This will show the text in poem style. Meaning, italicized and centered | [poem]Text Here[/poem] - This will show the text in poem style. Meaning, italicized and centered.<br /> | ||
[list] - Starts a list, list can also take one of the following arguments: - [list=1] - [list=a] - [list=A] [/list] ends the list - End the current list [*] Text - When [*] is placed in a list, it will provide a bullet in front of the text.<br /> | [list] - Starts a list, list can also take one of the following arguments: - [list=1] - [list=a] - [list=A] [/list] ends the list - End the current list [*] Text - When [*] is placed in a list, it will provide a bullet in front of the text.<br /> | ||
Revision as of 09:11, 11 June 2025
BBCode is an abbreviation for Bulletin Board Code. BBCode is essentially a series of tags that can be used to style or format text in posts. Examples of BBCode's uses are centered text, lists, varying font sizes and colors in posts.
The Basics
To use BBCode you first need to know what the effect is you're trying to reach. For example, we want, in the following text:
These few words in this text should be bold, while these should not
to have bold words. Looking at the table below, we can see that the bbcode to make text bold is
[b]bold text[/b]
Thus, having the following text:
[b]These few words in this text should be bold[/b], while these should not
will make the text look like this:
These few words in this text should be bold, while these should not
A few basic rules for all bbcode:
- all BBCode must be closed, so having [a] means we also need to have [/a] which "closes" it. The only exception to this is when using [*]
- although some bbcode can be used in a case-insensitive way (ie. you can use both [img][/img] and [IMG][/IMG], this is not guaranteed to work in all cases. To be on the safe side, try using it in lower-case if you can (ie. [b][/b] instead of [B][B]) to minimize processing time required to transform these to HTML.
Text Formatting
| Opening Tag | Closing Tag | Effect | Additional Information |
|---|---|---|---|
| [b] | [/b] | Makes the enclosed text bold. | |
| [i] | [/i] | Makes the enclosed text italic | |
| [u] | [/u] | Makes the enclosed text underlined. | |
| [strike] | [/strike] | | |
| [blink] | [/blink] | Makes the enclosed text blink. | |
| [marquee] | [/marquee] | Makes the enclosed text scroll right to left. | |
| [color=X] | [/color] | Changes the enclosed text color to X. | X may be a hexadecimal RGB value (#000000 - #FFFFFF), rgb(0,0,0) - rgb(128,128,128), or any other standard CSS color value (Red, Green, etc). As of XMB 1.10, the W3C Extended Color Set is supported. |
| [size=X] | [/size] | Changes the size of the enclosed text to X. | X is an offset form base-font-size. For example: If the forum font was set to 10pt, [size=]text[/size] would show "text" in 15pt font size. Size range is from -10 to 99. |
| [font=X] | [/font] | Changes the font of the enclosed text to X. | X can be any font. Prior to XMB 1.9.12.09, fonts with a "-" symbol could not be used. |
| [align=X] | [/align] | Aligns the enclosed text to X. | X can be any one of the following: left, center, right, or justify. |
Text Structure
| Opening Tag | Closing Tag | Effect | Additional Information | ||
|---|---|---|---|---|---|
| [quote] | [/quote] |
| When a quote is generated by XMB, the first line usually contains the author of the quoted post: [i]Originally posted by EXAMPLE:[/i] | ||
| [code] | [/code] |
| Text enclosed in [code][/code] BBCode will preserve whitespace and will be shown in monotype font (so all characters have the same width and height). Smilies and other BBCode will not be parsed inside [code][/code] tags. |
Block Elements
| Opening Tag | Closing Tag | Effect | Additional Information |
|---|---|---|---|
| [img] | [/img] | [content is replaced with the image] | |
| [img=AxB] | [/img] | [content is replaced with the image, resized to AxB px] | |
| [url] | [/url] | link to the URL provided. | |
| [url=?] | [/url] | the text provided, linking to URL.URL | |
| [email] | [/email] | link to the email provided. | |
| [email=?] | [/email] | the text provided, linking to email email. |
[youtube]
[/youtube]
Embeds a YouTube link. Added in XMB 1.9.12.
The tag supports raw video IDs, youtu.be, youtube.com and m.youtube.com URLs.
[list] Text Here [/list] - This will create a list from the text, in bullet points.
[poem]Text Here[/poem] - This will show the text in poem style. Meaning, italicized and centered.
[list] - Starts a list, list can also take one of the following arguments: - [list=1] - [list=a] - [list=A] [/list] ends the list - End the current list [*] Text - When [*] is placed in a list, it will provide a bullet in front of the text.