Text formatting guide

This is a guide for text formatting on this website whenever it is allowed, which is most text fields.

The majority is done through BB Code, which is a simplified version of HTML code used in forums and similar to offer an easy way to format messages.
This site uses the jBBCode extension to integrate such functionality.

We also have support for emoji and @mentions!

Basic formatting

Basic text formatting includes bold, italics, underline, and strikethrough text. You can make bold text with the [b] tag, italics with [i], add underlines using [u] and strikethrough text with [s].


My name is [b]Demi[/b]. [i]BB Code[/i] is really useful, isn't it? In fact, it's [u]essential[/u] to make your posts look [s]worse[/s] better. My name is Demi. BB Code is really useful, isn't it? In fact, it's essential to make your posts look worse better.

Text size

There are a few tags that can be used to change the size of sections of text.
They are the following: [large], [big], [small], and [tiny].

Here's an example of how they look like:


[large]Large text,[/large] [big]big text,[/big] normal text, [small]small text,[/small] [tiny]and tiny text.[/tiny] Large text, big text, normal text, small text, and tiny text.

Colored text

With the [color] tag you can easily color text. You can do it with color names or with HEX codes.


[color=red]This text is red.[/color]
[color=#1E90FF]This text is blue.[/color]
This text is red.
This text is blue.
[color=red]This text is red.[/color]
[color=#1E90FF]This text is blue.[/color]
This text is red.
This text is blue.

Background colors

Using the [background] tag you can choose a background color for sections of text. Supports the same kind of color codes as the [color] tag.


You can use [background=teal]background colors[/background] to highlight text. You can use background colors to highlight text.

Hyperlinks

There's two ways of creating hyperlinks. You can use the URL alone, or put it as a parameter and then the text that will be displayed between the tags.


[url]https://www.demirramon.com[/url] https://www.demirramon.com
[url=https://www.demirramon.com]Demirramon's hideout[/url] Demirramon's hideout

Images

You can use the [img] tag to display images.
If you want, you can also add alt text (using "quotes" for more than one word) which will display when hovering over the picture or if it can't load. It's also useful to screen readers.

Images generated with bbcode will also have an icon at their bottom right corner that will only show when hovering over it (or after tapping on it on mobile). This button will display the image on fullscreen mode, including its description (if any).


[img]https://www.demirramon.com/img/icons_site/demi.png[/img]
[img="Demi icon"]https://www.demirramon.com/img/icons_site/demi.png[/img]
Demi icon

Bullet and numeric lists

With the [ul] (or [list]) tag you can create bullet lists, and with [ol] (or [orderedlist]) you can make numeric ones. Then with [li] you can define the items inside.


[ul]
[li]Item 1[/li]
[li]Item 2[/li]
[li]Item 3[/li]
[/ul]
  • Item 1
  • Item 2
  • Item 3
[ol]
[li]Item 1[/li]
[li]Item 2[/li]
[li]Item 3[/li]
[/ol]
  1. Item 1
  2. Item 2
  3. Item 3

Tables

You can also create tables! They are a bit more complex, since you will need the [table] tag to create the table, then [tr] to create rows inside the table, and finally [td] inside the rows to create cells.
Alternatively, you can use the [table_h] tag instead if you want the first row to be a header.


[table]
    [tr]
        [td]ID[/td]
        [td]Name[/td]
        [td]Quantity[/td]
    [/tr]
    [tr]
        [td]1[/td]
        [td]Apples[/td]
        [td]5[/td]
    [/tr]
    [tr]
        [td]2[/td]
        [td]Pears[/td]
        [td]8[/td]
    [/tr]
[/table]
IDNameQuantity
1Apples5
2Pears8
[table]
    [tr]
        [td]ID[/td]
        [td]Name[/td]
        [td]Quantity[/td]
    [/tr]
    [tr]
        [td]1[/td]
        [td]Apples[/td]
        [td]5[/td]
    [/tr]
    [tr]
        [td]2[/td]
        [td]Pears[/td]
        [td]8[/td]
    [/tr]
[/table]
IDNameQuantity
1Apples5
2Pears8

Centering text

You can also choose how to center your text. Using one of these tags will make it so the text has full-width and aligns the way you chose, like in the following example:


[left]Put me on the left[/left]
[center]Put me on the center[/center]
[right]Put me on the right[/right]
Put me on the left
Put me on the center
Put me on the right

Quotes

You can quote something another person said by using the [quote] tag.


[quote]Someone said this, but who knows who it was.[/quote]
Someone said this, but who knows who it was.

You can also specify who's the author of the quote!
To put more than one word as the author you will have to surround it by "double quotes" (unless you're using the quote pop-up), or put a @ at the beginning to tag a user.


[quote=@Demirramon]I definitely said this at some point! I think.[/quote]
I definitely said this at some point! I think.

[quote="Some other person"]It was me who said the thing. But who am I, I wonder.[/quote]
Some other person
It was me who said the thing. But who am I, I wonder.

Quotes can be nested, but they won't be displayed after the second level of depth to prevent performance issues.

Mentions

You can use mentions to link to a user profile. If you mention someone in a comment that user will be notified. Mentions will not turn into links if the username doesn't match any existing user.


And then I told @Demirramon: it was @Kean who said so! And then I told @Demi (we're so barack): it was @Kean the eldritch creature who said so!

Emoji

You can use regular emoji in almost every text field of the website, but we also offer custom emoji! To use these, you only have to type their name between semi-colons like_this or use the button on the text editor toobar (or right here) to browse and pick emojis.


Man, this is so sad :pensive:. Man, this is so sad pensive.