BBCode - Revision history

Eiko at 21:13, 26 March 2026

2026-03-26T21:13:10Z

← Older revision		Revision as of 21:13, 26 March 2026
Line 86:		Line 86:
	Example:		Example:
	* <code>[gradient=#9FC8A3,#D5C8B4,#FD7ABA]Completionist[/gradient]</code>		* <code>[gradient=#9FC8A3,#D5C8B4,#FD7ABA]Completionist[/gradient]</code>

	~~'''Note:''' If an invalid color is provided or fewer than 2 colors are listed, the tag will fall back to normal text.~~

	=== Structure ===		=== Structure ===

Eiko at 21:12, 26 March 2026

2026-03-26T21:12:38Z

@@ Line 68: / Line 68: @@
 * <code>[size=100]normal text[/size]</code> - normal size
 * <code>[size=150]large text[/size]</code> - 150% of normal size
 === Structure ===

Eiko at 16:29, 2 December 2025

2025-12-02T16:29:40Z

← Older revision		Revision as of 16:29, 2 December 2025
Line 1:		Line 1:
	= 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.		'''BBCode''' is a markup language used on TypeGG for formatting the '''About Me''' section in user profiles (for GG+ users). This page documents all supported BBCode tags.

	== Tags ==		== Tags ==

Eiko: /* Spoiler */

2025-12-02T16:29:06Z

Spoiler

← Older revision		Revision as of 16:29, 2 December 2025
Line 117:		Line 117:

	The <code>[spoiler]</code> tag hides text behind a solid background. Click or tap the spoiler to reveal its contents.		The <code>[spoiler]</code> 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 ====

Eiko at 16:28, 2 December 2025

2025-12-02T16:28:35Z

← Older revision		Revision as of 16:28, 2 December 2025
Line 7:		Line 7:
	BBCode uses a system of tags enclosed in square brackets (<code>[]</code>). Tags come in pairs: an ''opening'' tag and a ''closing'' tag, with the closing tag containing a forward slash (<code>/</code>) after the opening bracket.		BBCode uses a system of tags enclosed in square brackets (<code>[]</code>). Tags come in pairs: an ''opening'' tag and a ''closing'' tag, with the closing tag containing a forward slash (<code>/</code>) after the opening bracket.

	Some opening tags include an equals sign (<code>=</code>) to specify values like URLs, sizes, or ~~colours~~.		Some opening tags include an equals sign (<code>=</code>) to specify values like URLs, sizes, or colors.

	=== Text Formatting ===		=== Text Formatting ===
Line 43:		Line 43:
	The <code>[s]</code> tag draws a horizontal line through the text, indicating <s>deleted or corrected content</s>.		The <code>[s]</code> tag draws a horizontal line through the text, indicating <s>deleted or corrected content</s>.

	==== ~~Colour~~ ====		==== Color ====

	<pre>		<pre>
Line 50:		Line 50:
	</pre>		</pre>

	The <code>[color]</code> tag changes the text ~~colour~~. You can specify ~~colours~~ using:		The <code>[color]</code> tag changes the text color. You can specify colors using:
	* '''Hex codes''': <code>#FF0000</code>, <code>#00FF00</code>, <code>#0000FF</code>		* '''Hex codes''': <code>#FF0000</code>, <code>#00FF00</code>, <code>#0000FF</code>
	* '''~~Colour~~ names''': <code>red</code>, <code>green</code>, <code>blue</code>, etc.		* '''Color names''': <code>red</code>, <code>green</code>, <code>blue</code>, etc.

	'''Note:''' Do not use quotation marks around the ~~colour~~ value.		'''Note:''' Do not use quotation marks around the color value.

	==== Font Size ====		==== Font Size ====
Line 284:		Line 284:

	This BBCode implementation is inspired by the [https://osu.ppy.sh/wiki/en/BBCode osu! BBCode system] with modifications for TypeGG's specific needs.		This BBCode implementation is inspired by the [https://osu.ppy.sh/wiki/en/BBCode osu! BBCode system] with modifications for TypeGG's specific needs.

	~~[[Category:Help]]~~
	~~[[Category:Formatting]]~~

Eiko: Created page with "= 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 e..."

2025-12-02T16:27:24Z

Created page with "= 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 (<code>[]</code>). Tags come in pairs: an ''opening'' tag and a ''closing'' tag, with the closing tag containing a forward slash (<code>/</code>) after the opening bracket. Some opening tags include an e..."

New page

= 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 (<code>[]</code>). Tags come in pairs: an ''opening'' tag and a ''closing'' tag, with the closing tag containing a forward slash (<code>/</code>) after the opening bracket.

Some opening tags include an equals sign (<code>=</code>) to specify values like URLs, sizes, or colours.

=== Text Formatting ===

==== Bold ====

<pre>
[b]text[/b]
</pre>

The <code>[b]</code> tag makes text '''bold'''.

==== Italic ====

<pre>
[i]text[/i]
</pre>

The <code>[i]</code> tag makes text ''italic''.

==== Underline ====

<pre>
[u]text[/u]
</pre>

The <code>[u]</code> tag adds an <u>underline</u> beneath the text.

==== Strikethrough ====

<pre>
[s]text[/s]
</pre>

The <code>[s]</code> tag draws a horizontal line through the text, indicating <s>deleted or corrected content</s>.

==== Colour ====

<pre>
[color=#HEXCODE]text[/color]
[color=red]text[/color]
</pre>

The <code>[color]</code> tag changes the text colour. You can specify colours using:
* '''Hex codes''': <code>#FF0000</code>, <code>#00FF00</code>, <code>#0000FF</code>
* '''Colour names''': <code>red</code>, <code>green</code>, <code>blue</code>, etc.

'''Note:''' Do not use quotation marks around the colour value.

==== Font Size ====

<pre>
[size=150]text[/size]
</pre>

The <code>[size]</code> tag adjusts text size as a percentage of the base font size. Values are clamped between '''30%''' and '''200%'''.

Examples:
* <code>[size=50]small text[/size]</code> - 50% of normal size
* <code>[size=100]normal text[/size]</code> - normal size
* <code>[size=150]large text[/size]</code> - 150% of normal size

=== Structure ===

==== Heading ====

<pre>
[heading]Title[/heading]
</pre>

The <code>[heading]</code> tag creates a section heading (rendered as an <code><h2></code> element) with a bottom border.

==== Centre ====

<pre>
[centre]text[/centre]
[center]text[/center]
</pre>

The <code>[centre]</code> tag (or American spelling <code>[center]</code>) centres text horizontally. Both spellings are supported.

==== Quote ====

<pre>
[quote]
Quoted text goes here.
[/quote]
</pre>

The <code>[quote]</code> tag creates a styled blockquote with a left border, indentation, and distinct background. Useful for quoting other users or sources.

==== Notice ====

<pre>
[notice]
Important information here.
[/notice]
</pre>

The <code>[notice]</code> tag creates a highlighted notice box with a border and background. Use this to draw attention to important information.

=== Spoilers and Collapsible Content ===

==== Spoiler ====

<pre>
[spoiler]hidden text[/spoiler]
</pre>

The <code>[spoiler]</code> 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 ====

<pre>
[box=Title]
Content goes here.
[/box]
</pre>

The <code>[box]</code> 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 ====

<pre>
[spoilerbox]
Hidden content here.
[/spoilerbox]
</pre>

The <code>[spoilerbox]</code> tag is identical to <code>[box]</code> but always uses "SPOILER" as the title.

=== Code ===

==== Inline Code ====

<pre>
[c]code here[/c]
</pre>

The <code>[c]</code> 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 ====

<pre>
[code]
function example() {
return "Hello, World!";
}
[/code]
</pre>

The <code>[code]</code> tag creates a preformatted code block with a monospace font and scrollable container. BBCode inside code blocks is not parsed.

=== Links ===

==== URL ====

<pre>
[url]https://typegg.com[/url]
[url=https://typegg.com]Click here![/url]
</pre>

The <code>[url]</code> tag creates a clickable hyperlink.

You can either:
* Place the URL between the tags (displays the URL as link text)
* Use the <code>=</code> syntax to specify custom link text

==== Email ====

<pre>
[email]user@example.com[/email]
[email=user@example.com]Contact us[/email]
</pre>

The <code>[email]</code> tag creates a mailto link that opens the user's default email client.

=== Lists ===

<pre>
[list]
[*]First item
[*]Second item
[*]Third item
[/list]
</pre>

The <code>[list]</code> tag creates a bulleted list. Each item is marked with <code>[*]</code>.

<pre>
[list=1]
[*]First item
[*]Second item
[*]Third item
[/list]
</pre>

Adding any value (e.g., <code>=1</code>) creates a numbered (ordered) list instead.

'''Note:''' Lists can be nested inside each other.

=== Media ===

==== Image ====

<pre>
[img]https://example.com/image.png[/img]
</pre>

The <code>[img]</code> tag embeds an image. The URL must point directly to an image file.

'''Size options:'''

<pre>
[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
</pre>

* '''Width only''': <code>[img=200]</code> sets the width to 200px with automatic height
* '''Width and height''': <code>[img=200x150]</code> sets exact dimensions
* '''Percentage''': <code>[img=50%]</code> sets width as a percentage (1-100%)

Maximum dimensions are capped at 2000 pixels.

==== Image Map ====

<pre>
[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]
</pre>

The <code>[imagemap]</code> tag creates an image with clickable regions. The first line is the image URL, followed by area definitions.

Each area is defined as:
<pre>
X Y WIDTH HEIGHT REDIRECT TITLE
</pre>

* '''X, Y''': Position as percentage (0-100) from top-left
* '''WIDTH, HEIGHT''': Size as percentage of image dimensions
* '''REDIRECT''': URL to navigate to (use <code>#</code> for non-clickable areas)
* '''TITLE''': Optional tooltip text (can contain spaces)

==== YouTube ====

<pre>
[youtube]dQw4w9WgXcQ[/youtube]
</pre>

The <code>[youtube]</code> tag embeds a YouTube video player. Use only the '''video ID''', not the full URL.

The video ID is the 11-character string after <code>v=</code> in a YouTube URL:
<pre>
https://www.youtube.com/watch?v=dQw4w9WgXcQ
^^^^^^^^^^^
This is the video ID
</pre>

==== Audio ====

<pre>
[audio]https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3[/audio]
</pre>

The <code>[audio]</code> 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 [https://osu.ppy.sh/wiki/en/BBCode osu! BBCode system] with modifications for TypeGG's specific needs.

[[Category:Help]]
[[Category:Formatting]]