How to Format Posts using bbCode

A Beginner's Guide to Using BBCode

BBCode (Bulletin Board Code) is a simple markup language used to format posts in forums and other online platforms, like the one on this site. It uses tags enclosed in square brackets [ ] to tell the website how to display your text. It's an easy way to add formatting like bold text, images, or lists without needing to know complex HTML.

Below is a guide to the BBCode tags available here, showing how to use them and what they do.

Basic Formatting

Bold Text

Purpose: Makes the enclosed text appear bold.
Syntax: [b]Your text here[/b]
Example Output: Your text here

Italic Text

Purpose: Makes the enclosed text appear italicized.
Syntax: [i]Your text here[/i]
Example Output: Your text here

Underlined Text

Purpose: Underlines the enclosed text.
Syntax: [u]Your text here[/u]
Example Output: Your text here

Strikethrough Text

Purpose: Puts a line through the enclosed text.
Syntax: [s]Your text here[/s]
Example Output: Your text here

Subscript

Purpose: Makes text appear slightly lower than the normal line (subscript).
Syntax: H[sub]2[/sub]O
Example Output: H₂O

Superscript

Purpose: Makes text appear slightly higher than the normal line (superscript).
Syntax: E=mc[sup]2[/sup]
Example Output: E=mc²

Text Appearance

Font Size

Purpose: Changes the size of the enclosed text. Use a number (size in pixels).
Syntax: [size=20]Large text[/size]
Example Output (Conceptual): Large text (Actual appearance depends on site CSS)

Font Color

Purpose: Changes the color of the enclosed text. Use standard color names (e.g., red, blue) or hex codes (e.g., #FF0000).
Syntax (Name): [color=blue]Blue text[/color]
Syntax (Hex): [color=#008000]Green text[/color]
Alternate Tag: [colour=...] also works.
Example Output: Blue text, Green text

Font Family

Purpose: Changes the font type of the enclosed text (if the font is available).
Syntax: [font=Arial]Arial text[/font]
Example Output: Arial text

Highlight

Purpose: Adds a background color to the text, like using a highlighter pen.
Syntax (Default): [highlight]Highlighted text[/highlight]
Syntax (Color): [highlight=yellow]Yellow highlighted text[/highlight]
Example Output (Conceptual): Highlighted text (Default color depends on site settings)

Layout and Structure

Line Break

Purpose: Inserts a single line break.
Syntax: [br]
Example Output: Creates a break
like this one.

Horizontal Rule

Purpose: Inserts a horizontal dividing line.
Syntax: [hr]
Example Output:

Text Alignment

Purpose: Aligns the enclosed text (or other elements) to the left, center, right, or justifies it.
Syntax (Left): [align=left]Left-aligned text.[/align]
Syntax (Center): [align=center]Center-aligned text.[/align]
Syntax (Right): [align=right]Right-aligned text.[/align]
Syntax (Justify): [align=justify]Justified text block...[/align]
Example Output (Center):
Center-aligned text.

Code Block

Purpose: Displays preformatted text or code, often in a monospaced font and preserving whitespace.
Syntax: [code]Your code here...[/code]
Syntax (with Language): [code=css].example { color: red; }[/code] (Language highlighting depends on site setup)
Example Output:
```
Your code here...
```

Anchor

Purpose: Creates a named point in the page that can be linked to directly.
Syntax: [anchor=section1]This is Section 1[/anchor]
Example Output: Creates an invisible anchor named 'section1'. You could link to it using a URL like yourpage.html#section1.

Links and Images

URL (Link)

Purpose: Creates a clickable hyperlink.
Syntax (Simple): [url]https://www.google.com[/url]
Syntax (Named): [url=https://www.google.com]Visit Google[/url]
Example Output (Simple): https://www.google.com
Example Output (Named): Visit Google

Email Link

Purpose: Creates a clickable email link.
Syntax (Simple): [email]user@example.com[/email]
Syntax (Named): [email=user@example.com]Email Us[/email]
Example Output (Simple): user@example.com
Example Output (Named): Email Us

Image

Purpose: Displays an image.
Syntax (Basic): [img]https://via.placeholder.com/150[/img]
Syntax (With Dimensions): [img width=100 height=50]https://via.placeholder.com/150[/img]
Syntax (With Alignment): [img align=right]https://via.placeholder.com/150[/img]
Example Output (Basic): Displays the image from the URL. (Actual image omitted here)

Lists

Unordered List (Bullets)

Purpose: Creates a bulleted list.

Syntax:

[list]
[*]First item
[*]Second item
[*]Third item
[/list]

Example Output:
- First item
- Second item
- Third item

Ordered List (Numbers)

Purpose: Creates a numbered list.

Syntax:

[list=1]
[*]Step one
[*]Step two
[*]Step three
[/list]

Example Output:
1. Step one
2. Step two
3. Step three

Ordered List (Letters)

Purpose: Creates a list ordered with lowercase letters.

Syntax:

[list=a]
[*]Option A
[*]Option B
[*]Option C
[/list]

Example Output:
1. Option A
2. Option B
3. Option C

How to Format Posts using bbCode

A Beginner's Guide to Using BBCode

Basic Formatting

Text Appearance

Layout and Structure

Links and Images

Lists

1 Reply