SMF BBcode Guide

[red herring]

This post is a guide on how to use Simple Machine Forum's BBCode (Bulletin Board Code) in your posts. It aims to document all of the useable BBCode tags.
Table of Contents

• Text style
  
  • Font
  • Paragraphs
• Links and media
  
  • Links
  • Media
• Quotes, spoilers and code
• Lists and tables
  
  • Lists
  • Tables
• Less common tags

[red herring]

Text Style (^)
Font (^)

• Bold text
  Use [b]this tag[/b] to make bold text. Example:
  [b]Bold text[/b] produces Bold text
  
  
• Italic text
  Use [i]this tag[/i] to make italic text. Example:
  [i]Italic text[/i] produces Italic text
  
  
• Underlined text
  Use [u]this tag[/u] to make underlined text. Example:
  [u]Underlined text[/u] produces Underlined text
  
  
• Strikethrough text
  Use [s]this tag[/s] to make strikethrough text. Example:
  [s]Strikethrough text[/s] produces Strikethrough text
  
  
• Superscripts
  Use [sup]this tag[/sup] to make supserscripts. Example:
  Normal text[sup]superscript text[/sup] produces Normal text^{superscript text}
  
  
• Subscripts
  Use [sub]this tag[/sub] to make supserscripts. Example:
  Normal text[sub]superscript text[/sub] produces Normal text_{superscript text}
  
  
• Font size
  Use [size=]this tag[/size] to change the font size. The size comes after the equals sign. You can specify the size as pixels, points, or em. Pixels and points require a positive integer, while em can have a single decimal digit. Example:
  [size=1]Small text[/size] produces Small text
  [size=5]Big text[/size] produces Big text
  
  
• Font family
  Use [font=]this tag[/font] to change the font family. The font family's name comes after the equals sign. Not all fonts can be displayed on all devices. For example, Android does not have Comic Sans or Impact installed. Example:
  [font=Comic Sans MS]Comic sans[/font] produces Comic sans
  
  
• Colored text
  Use [color=#000000]this tag[/color] to make colored text. The color is added after the equals sign. You can use a hex triplet or a valid named color. Example:
  [color=#dd00ee]Colored text[/color] produces Colored text
  [color=olive]Olive text[/color] produces Olive text
  This tag can also be spelled as [colour=][/colour].
  
  
• Colored background
  Use [bgcolor=]this tag[/bgcolor] to make colored text. The color is added after the equals sign. You can use a hex triplet or a valid named color. Example:
  [bgcolor=#dd00ee]Colored background[/bgcolor] produces Colored background
  [bgcolor=gold]Gold background[/bgcolor] produces Gold background
  This tag can also be spelled as [bgcolour=][/bgcolour].
  
  
• Abbreviation/tooltip
  Use this tag to add an explanation of what an abbreviation means.  Add the explanation after the equals sign, and the abbreviation in between the tags. The explanation is displayed as a tooltip. This may not work on mobile devices. Example:
  [abbr="Text Based Games"]TBG[/abbr] produces TBG
  
  
• Ruby text
  Use [ruby=]this tag[/ruby] to add ruby text. Ruby text is used to indicate the pronunciation of East Asian characters. Example:
  [ruby=huānyíng]歡迎[/ruby] produces 歡迎huānyíng
  
  
• Preformatted text
  Use [pre]this tag[/pre] to make preformatted text. The text is displayed using a monospaced font. If it is in the same line as a non-preformatted text, it will be displayed in a new line. Example:
  [pre]Preformatted text[/pre] produces
  

  Preformatted text

  
  
  
  

Paragraphs (^)

• Align left
  Use
  [left]this tag[/left]
   to align text to the left. Normally you don't need this because everything is aligned to the left by default.
  
  
• Align center
  Use
  [center]this tag[/center]
   to align text to the center. Example:
  
  [center]Centered text[/center]
   produces
  
  Centered text
  This tag can also be spelled as [centre][/centre].
  
  
• Align right
  Use
  [right]this tag[/right]
   to align text to the right. Example:
  
  [right]Right-alignedtext[/right]
   produces
  
  Right-aligned text
  
  
• Justify
  Use
  [justify]this tag[/justify]
   to align the text evenly. Example:
  
  Code Select Expand
  [justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh.[/justify] produces
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh.
  
  
• Float
  Use
  [float=right max=45%]this tag[/float]
   to specify how a figure (image, video, etc) is placed with respect to a pargraph. The options available are left and right, which are placed after the equals sign. Example:
  
  Code Select Expand
  [float=left][img width=60]https://em-content.zobj.net/source/facebook/355/sparkles_2728.png[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh. produces
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh.
  
  
  Code Select Expand
  [float=right][img width=60]https://em-content.zobj.net/source/facebook/355/sparkles_2728.png[/img][/float]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh. produces
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae faucibus lectus. Integer in consequat nisl. Aliquam et laoreet augue, vel egestas est. Donec quis purus id mi convallis ullamcorper nec iaculis nibh. Quisque gravida interdum magna ut ullamcorper. Maecenas dignissim tellus interdum sem auctor pulvinar. Vivamus molestie nisl vitae finibus tempor. Sed ligula neque, pulvinar a dolor nec, facilisis vulputate nibh.
  
  

[red herring]

Links and media (^)
Links (^)

• Standard links
  Use [url=]this tag[/url] to add a link to a URL. You can add the URL inside the tags, or you can place it after the equals sign. If you place it after the equals sign, the link will be created with text inside the tag as the description. Example:
  [url="https://example.com/"]https://example.com[/url] produces https://example.com
  [url="https://example.com/"]A link[/url] produces A link
  Pasting a URL directly to the editor also creates a link when you save the post. Links created with this tag are always opened in a new tab. If you want the link to open in the same tab, use [iurl=]these tags[/iurl] instead of the URL tag.
  
  
• Email links
  Use [email=]this tag[/email] to add a link to a mailto: URL. This tag is similar to the URL tag, but instead of URLs, you put in email addresses. Example:
  [email]example@example.com[/email] produces example@example.com
  [email=example@example.com]A link[/email] produces A link
  
  
• Anchors
  Use [anchor=]this tag[/anchor] to create anchors in your post. Anchors are used to create links to parts of a post. Place the name of the anchor after the equals sign. The anchor name cannot start with digits or only contain digits. Example:
  [anchor=example_anchor]This is an anchor[/anchor] produces This is an anchor
  This anchor can then be linked to using the iurl tag. If you didn't notice it, this topic uses anchor tags to link to specific parts of a post. To link to an anchor, use  [iurl=]this tag[/iurl]. After the equals sign, place the name of the anchor, prefixed with a # sign. Example:
  [iurl=#paragraphs]This links to the paragraphs section[/iurl] produces This links to the paragraphs section
  
  
• Member links/mentions
  Use [member=]this tag[/member] to create a link to a member's profile. Add the member's ID after the equals sign. The text inside the tag is the description. Using this tag will send an alert to that member. Example:
  [member=1003]red herring[/member] produces @red herring
  An easier way to mention a member is by using the at (@) sign, followed by the member's username.
  
  

Media (^)

• Images
  Use [img= width= height=]this tag[/img] to insert an image. Place the image link between the two tags, or after the equals sign following img. You can also specify the size of the image in pixels using width= and height=. Example:
  [img width=30]https://em-content.zobj.net/source/facebook/355/sparkles_2728.png[/img] produces
  
  
  
• Video
  Use [video=]this tag[/video] to insert an embedded video file. Place the video link between the two tags, or after the equals sign following video. Example:
  [video]https://upload.wikimedia.org/wikipedia/commons/1/19/Robert_Huw_Morgan_Bach_FugueG.ogv[/video] produces
  
  
  
• Audio
  Use [audio=]this tag[/audio] to insert an embedded audio file. Place the audio link between the two tags, or after the equals sign following audio. Example:
  [audio]https://upload.wikimedia.org/wikipedia/commons/e/e9/Johann_Sebastian_Bach_-_Concerto_for_Two_Violins_in_D_minor_-_1._Vivace.ogg[/audio] produces
  
  
  
• YouTube
  Use [youtube]this tag[/youtube] to insert an embedded YouTube video. Place the YouTube video's ID between the two tags. Example:
  [youtube]g02WKrWjUgA[/youtube] produces
  
  
  

[red herring]

Quotes, spoilers and code (^)

• Quotes
  Use [quote]this tag[/quote] to add quotes. To specify the author of the quote, add their name after the equals sign. Example:
  [quote]Insert famous quote[/quote]
   produces
  

  Insert famous quote

  [quote author=Livy]Better late than never.[/quote] produces
  

  Better late than never.

• Spoilers
  Use [spoiler]this tag[/spoiler] to add spoilers. The contents of the spoiler are placed between the tags and are hidden unless the reader opens it. Example:
  [spoiler]The United States won the American Revolutionary War.[/spoiler] produces
  
  Spoiler

  The United States won the American Revolutionary War.
  
  
• Code
  Use [code]this tag[/code] to add a block of code. The contents of the code block are displayed using a monospace font and text wrapping is disabled. Example:
  [code]console.log("hello");[/code] produces
  
  Code Select Expand
  console.log("hello");
  

[red herring]

Lists and tables (^)
Lists (^)
All lists are created using
[list]
this tag[/list]
. A list item is created by putting
[li]this tag[/li]
 inside of the list tag. There are two types of lists: unenumerated lists and enumerated lists.

Unenumerated lists
Unenumerated lists can be created using the list tag itself. Example:

Code Select Expand

[list]
[li]Apples[/li]
[li]Oranges[/li]
[/list]
produces

• Apples
• Oranges

You can change the marker type by specifying type= after the list tag. The available marker types for unenumerated lists are:

• none (disables markers)
• disc (the default)
• circle
• square

Example:

Code Select Expand

[list type=square]
[li]Apples[/li]
[li]Oranges[/li]
[/list]produces

• Apples
• Oranges

Enumerated lists
Enumerated lists are created by specifying a numerator type after the list tag. The available numerators are:

• decimal (1, 2, 3, ...)
• decimal-leading-zero (01, 02, 03, ...)
• lower-roman (i, ii, iii, ...)
• upper-roman (I, II, III, ...)
• lower-alpha (a, b, c, ...)
• upper-alpha (A, B, C, ...)
• lower-greek (α, β, γ, ...)
• hebrew (א‎, ב‎, ג‎, ...)
• armenian (Ա, Բ, Գ, ...)
• georgian (ა, ბ, გ, ...)
• cjk-ideographic (一, 二, 三, ...)
• hiragana (あ, え, い, ...)
• katakana (ア, エ, イ, ...)
• hiragana-iroha (い, ろ, は ...)
• katakana-iroha (イ, ロ, ハ, ...)

Example:

Code Select Expand

[list type=decimal]
[li]Apples[/li]
[li]Oranges[/li]
[/list]produces

• Apples
• Oranges

Nesting lists
Lists can be put inside another list by placing the child list inside a [li][/li] tag of the parent list. Example:

Code Select Expand

[list type=decimal]
[li]Asia
[list]
[li]China[/li]
[li]Japan[/li]
[li]Korea[/li]
[/list]
[/li]
[li]Europe
[list]
[li]England[/li]
[li]Germany[/li]
[li]France[/li]
[/list]
[/li]
[/list]
produces

• Asia
  
  • China
  • Japan
  • Korea
• Europe
  
  • England
  • Germany
  • France

Tables (^)
Tables are created with [table]this tag[/table]. Each row is contained in [tr]this tag[/tr], and a cell of a row is conatined in [td]this tag[/td]. Example:

Code Select Expand

[table]
[tr]
[td]Place[/td]
[td]Rating[/td]
[/tr]
[tr]
[td]A[/td]
[td]5/5[/td]
[/tr]
[tr]
[td]B[/td]
[td]4/5[/td]
[/tr]
[/table]
produces

Place	Rating
A	5/5
B	4/5

A horizontal rule can be inserted using the [hr] tag. This does not work inside tables. Example:

Hello[hr]world produces
Helloworld

[red herring]

Less common tags (^)

• ltr and rtl
  These tags are used to specify the text direction for posts that contain both left-to-right and right-to-left text.
• nobbc
  This tag disables BBCode inside it.
• br
  This tag creates a linebreak.
• me
  This tag is used to describe a user's action, similar to IRC's /me command.
• php
  This tag applies PHP syntax highlighting to its contents.
• time
  This tag converts UNIX timestamps to human-readable date-times.