How to Format Posts using bbCode

Topic

[John P.]

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][email protected][/email]
• Syntax (Named): [[email protected]]Email Us[/email]
• Example Output (Simple): [email protected]
• 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

John P.
Texas Metal Works
Founder

• This topic was modified 7 months ago by John P..
• This topic was modified 7 months ago by John P..
• This topic was modified 7 months ago by John P..
• This topic was modified 7 months ago by John P..
• This topic was modified 7 months ago by John P..

Replies

There is also another special one that we probably don’t need here, but it’s fun anyway…

Spoiler

• Purpose: Hides content until the user clicks to reveal it. Good for hiding answers, sensitive details, or large blocks of text.
• Syntax (Default Title): [spoiler]This content is hidden.[/spoiler]
• Syntax (Custom Title): [spoiler=Click to Reveal]This content is hidden.[/spoiler]
• Example Output:

This content was hidden until you clicked!

John P.
Texas Metal Works
Founder