BBCode
BBCode
BBCode (Bulletin Board Code) is a markup language used on TypeGG for formatting the About Me section in user profiles (for GG+ usersr). This page documents all supported BBCode tags.
Tags
BBCode uses a system of tags enclosed in square brackets ([]). Tags come in pairs: an opening tag and a closing tag, with the closing tag containing a forward slash (/) after the opening bracket.
Some opening tags include an equals sign (=) to specify values like URLs, sizes, or colors.
Text Formatting
Bold
[b]text[/b]
The [b] tag makes text bold.
Italic
[i]text[/i]
The [i] tag makes text italic.
Underline
[u]text[/u]
The [u] tag adds an underline beneath the text.
Strikethrough
[s]text[/s]
The [s] tag draws a horizontal line through the text, indicating deleted or corrected content.
Color
[color=#HEXCODE]text[/color] [color=red]text[/color]
The [color] tag changes the text color. You can specify colors using:
- Hex codes:
#FF0000,#00FF00,#0000FF - Color names:
red,green,blue, etc.
Note: Do not use quotation marks around the color value.
Font Size
[size=150]text[/size]
The [size] tag adjusts text size as a percentage of the base font size. Values are clamped between 30% and 200%.
Examples:
[size=50]small text[/size]- 50% of normal size[size=100]normal text[/size]- normal size[size=150]large text[/size]- 150% of normal size
Structure
Heading
[heading]Title[/heading]
The [heading] tag creates a section heading (rendered as an <h2> element) with a bottom border.
Centre
[centre]text[/centre] [center]text[/center]
The [centre] tag (or American spelling [center]) centres text horizontally. Both spellings are supported.
Quote
[quote] Quoted text goes here. [/quote]
The [quote] tag creates a styled blockquote with a left border, indentation, and distinct background. Useful for quoting other users or sources.
Notice
[notice] Important information here. [/notice]
The [notice] tag creates a highlighted notice box with a border and background. Use this to draw attention to important information.
Spoilers and Collapsible Content
Spoiler
[spoiler]hidden text[/spoiler]
The [spoiler] tag hides text behind a solid background. Click or tap the spoiler to reveal its contents.
Note: Nested spoilers are automatically flattened - inner spoiler tags become plain text spans.
Box
[box=Title] Content goes here. [/box]
The [box] tag creates a collapsible container with a custom title. Click the title to expand or collapse the content. If no title is specified, it defaults to "SPOILER".
Spoilerbox
[spoilerbox] Hidden content here. [/spoilerbox]
The [spoilerbox] tag is identical to [box] but always uses "SPOILER" as the title.
Code
Inline Code
[c]code here[/c]
The [c] tag formats text as inline code with a monospace font and background highlight. Use this for short code snippets, keyboard shortcuts, or technical terms.
Code Block
[code]
function example() {
return "Hello, World!";
}
[/code]
The [code] tag creates a preformatted code block with a monospace font and scrollable container. BBCode inside code blocks is not parsed.
Links
URL
[url]https://typegg.com[/url] [url=https://typegg.com]Click here![/url]
The [url] tag creates a clickable hyperlink.
You can either:
- Place the URL between the tags (displays the URL as link text)
- Use the
=syntax to specify custom link text
[email][email protected][/email] [[email protected]]Contact us[/email]
The [email] tag creates a mailto link that opens the user's default email client.
Lists
[list] [*]First item [*]Second item [*]Third item [/list]
The [list] tag creates a bulleted list. Each item is marked with [*].
[list=1] [*]First item [*]Second item [*]Third item [/list]
Adding any value (e.g., =1) creates a numbered (ordered) list instead.
Note: Lists can be nested inside each other.
Media
Image
[img]https://example.com/image.png[/img]
The [img] tag embeds an image. The URL must point directly to an image file.
Size options:
[img=200]URL[/img] - Width of 200 pixels [img=200x150]URL[/img] - 200 pixels wide, 150 pixels tall [img=50%]URL[/img] - 50% of container width
- Width only:
[img=200]sets the width to 200px with automatic height - Width and height:
[img=200x150]sets exact dimensions - Percentage:
[img=50%]sets width as a percentage (1-100%)
Maximum dimensions are capped at 2000 pixels.
Image Map
[imagemap] https://example.com/image.png 10 20 30 15 https://link1.com Tooltip text 50 40 25 20 https://link2.com Another tooltip [/imagemap]
The [imagemap] tag creates an image with clickable regions. The first line is the image URL, followed by area definitions.
Each area is defined as:
X Y WIDTH HEIGHT REDIRECT TITLE
- X, Y: Position as percentage (0-100) from top-left
- WIDTH, HEIGHT: Size as percentage of image dimensions
- REDIRECT: URL to navigate to (use
#for non-clickable areas) - TITLE: Optional tooltip text (can contain spaces)
YouTube
[youtube]dQw4w9WgXcQ[/youtube]
The [youtube] tag embeds a YouTube video player. Use only the video ID, not the full URL.
The video ID is the 11-character string after v= in a YouTube URL:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
^^^^^^^^^^^
This is the video ID
Audio
[audio]https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3[/audio]
The [audio] tag embeds an HTML5 audio player. The URL must point directly to an audio file.
Supported formats depend on the user's browser, but MP3 is widely supported.
References
This BBCode implementation is inspired by the osu! BBCode system with modifications for TypeGG's specific needs.