Feature Guide to BBCode Formatting in BBCode & Formatting Knowledge Base | World Anvil

Feature Guide to BBCode Formatting

On World Anvil, you can format text, add images, and create advanced layouts using BBCode (a system of markup tags). This guide takes you through all the BBCode formatting tags, with links to advanced guides for more indepth functions!

 

For basic text formatting without BBCode, use Plato, our experimental simple text (WYSIWYG) editor. You can switch between editors in the interface settings. This will let you apply basic formatting without BBCode.

   

What are BBCode tags?

A BBCode tag is a set of characters between square brackets. For example, [b] is a BBCode tag.

 

The following image shows a side-by-side comparison between the advanced BBCode editor and the result:

BBCode editor - presentation comparison

 

The characters inside the brackets determine the effect of the tag; in this case, b stands for bold, so it will apply bold formatting to the text between the tags. In edit mode, tags are always visible; in view mode, the tags disappear and their formatting is applied instead.

 

Many BBCode tags require an opening and a closing tag to tell the system when the tag's effect should end. Closing tags look like regular opening tags, but with a forward slash / in the beginning. For example, [b] is the opening tag, while [/b] is the closing tag.

 

BBCode tags with options (aka. arguments)

In addition to single BBCode tags (like [br] for a line break), and those which need a closing tag (like [b][/b]), there are also tags with options! These options (technically known as "arguments") modify the behavior of the tag, giving you more advanced choices for formatting. Arguments are placed in the opening tag, and are separated by a colon : or a pipe |.

 

For example, the BBCode to embed an image looks like this [img:5068227].
Technically this has one "argument" - the number that defines the image you want to use.

 

To centre the image on your page, you can add an "argument" like this [img:5068227|center].
This tag has two arguments: the Image ID number (5068227) and the center alignment instruction.

 

Examples of other tags that use options are colored text, tooltips, and external links.

 

List of tags

The following is a list of all BBCode tags. Simple tags are shown with just an example, while more complex tags have a link to learn more.

 

Basic text formatting

[b]Bold text[/b]
Bold text
 
[i]Italic text[/i]
Italic text
 
[u]Underlined text[/u]
Underlined text
 
[s]Strikethrough text[/s]
Strikethrough text
 
[small]Smaller text[/small]
Smaller text
 
This is [sup]superscript[/sup]
This is superscript
 
This is [sub]subscript[/sub]
This is subscript
 
[dc]T[/dc]his is a fancy drop cap you can use in the first line of your article. If the paragraph has three lines or more, the fancy drop cap will look much better!
This is a fancy drop cap you can use in the first line of your article. If the paragraph has three lines or more, the fancy drop cap will look much better!
 
This [redacted:4] is redacted
This ████ is redacted
 
[color:red|yellow]This is red with a yellow background.[/color]
This is red with a yellow background
 
[noparse]Use this to display [b]BBCode tags[/b] without applying their formatting.[/noparse]
Use this to display [b]BBCode tags[/b] without applying their formatting.
 

Tags below are available to all Guild subscription tiers. Upgrade here.

/* This will be hidden from view */
(Nothing would show here)
 

Tags below are available to the Grandmaster subscription tier and above. Upgrade here.

[mark]This is highlighted![/mark]
This is highlighted!
 

Headers

[h1]Level 1 header[/h1]

Level 1 header

[h2]Level 2 header[/h2]

Level 2 header

[h3]Level 3 header[/h3]

Level 3 header

[h4]Level 4 header[/h4]
Level 4 header
 

Layout containers

[quote]This is a quote panel.
|Author[/quote]
This is a quote panel.
— Author
 
[aloud]You can use this to highlight a paragraph (for example, a description to read aloud in an RPG session).[/aloud]
You can use this to highlight a paragraph (for example, a description to read aloud in an RPG session).
 
[code]This will use a monospaced font with a different background, like in a code editor. It will also put everything in a single line unless you add manual line breaks.[/code]
This will use a monospaced font with a different background, like in a code editor. It will also put everything in a single line unless you add manual line breaks.
 
[spoiler]This content will be hidden by default, but it can be revealed.
|Click me![/spoiler]
Click me!
This content will be hidden by default, but it can be revealed.
 
[tooltip:This content will be hidden unless you mouse over]Mouse over to see the tooltip![/tooltip]
Mouse over to see the tooltip!
 
--Example::This mimics the style of sidebar fields--
Example
This mimics the style of sidebar fields
 
[url:https://worldanvil.com]Use this tag to link to any web page.[/url]
 
@[Article title](template:id-here)
Article title
 
[articleblock:id-here]
Example article
Generic article | November 20, 2023
Mock articleblock for illustrative purposes. If this was real, clicking it would take you to the article.
 
[world:7c0fec4d-9436-4325-90f5-cdbfdd3932b6]
 

Anchors (aka. jump links)

[h3|example-anchor]This header is an anchor[/h3]

This header is an anchor

[url:#example-anchor]Click me to go to the header above![/url]
 
[category:category-id-here]Category name[/category]
Category name

[blocklink:statblock-id-here]
Statblock name

[timeline:timeline-id-here]Timeline name[/category]
Timeline name

[history:history-id-here]Historical event name[/category]
Historical name

[worldmeta:world-id-here|imagery]
This would embed the "Imagery" section of your world meta.
 

Embedding World Anvil content

[book:category-id-here]
Category title

[map:map-id-here]
This would embed an interactive version of the map, able to zoom and interact with pins and layers.

[block:block-id-here]
This would embed the RPG block with the given ID.

[img:5068227]
 

Tags below are available to all Guild subscription tiers. Upgrade here.

[secret:secret-id-here]
This would embed the secret to an article but keep it hidden from anyone without permission to view it.
 

Tags below are available to the Master subscription tier and above. Upgrade here.

[manuscript:manuscript-id-here]
Example title
READ

[familytree:tree-id-here]
This would embed the interactive family tree based on the character you selected.

[diplomacy:web-id-here]
This would embed the interactive diplomacy web based on the organization you selected.
 

Paragraph formatting

This is the first line.[br]And this is the second line.
This is the first line.
And this is the second line.
Note that you can always leave an empty line to create a new paragraph.
 
You can separate paragraphs visually...[hr]with a horizontal ruler!
You can separate paragraphs visually...
with a horizontal ruler!
 
[in]Or you can wrap your entire paragraphs with these tags to indent the first line too.[/in]
Or you can wrap your entire paragraphs with these tags to indent the first line too.
 
[p]Use these tags to create paragraphs. In most cases, you can just leave blank lines instead of using these tags.[/p]

Use these tags to create paragraphs. In most cases, you can just leave blank lines instead of using these tags.

 
[center]This text is centered![/center]
This text is centered!
 

Lists

[ul]
- This is the first item
- Second item!
[/ul]
  • This is the first item
  • Second item!
 

Columns

[row]
[col]
This is the left column.
[/col]
[col]
This is the right column.
[/col]
[/row]
This is the left column.
This is the right column.
 

Tables

[table]
[tr]
[th]Header cell[/th]
[th]Another header cell[/th]
[/tr]
[tr]
[td]Some data would go here[/td]
[td]And even more data here![/td]
[/tr]
[table]
Header cell Another header cell
Some data would go here And even more data here!
 

Icons

For all of the following types of icons, check How to use icons to learn more:

 
[pin:flat_black_alchemist]
 
[genesysdice:success]
s
 
[pf:2a]
 

Tags below are available to the Grandmaster subscription tier and above. Upgrade here.

 
[section:ra ra-aura] [/section]
[section:fa fa-hand-wave] [/section]

 

Interactive dice roller

[roll:3d10]
3d10
If this was on a World Anvil world, you would see a notification on the bottom left corner of the screen with the roll result.
 
[articletoc]
  1. Header 1
  2. Header 2
    1. Sub-header
In a real table of contents, clicking on each item would take you to the header.
 
[toc]

World Codex

Category 1
Category 2
In a real table of contents, clicking on each category would display all articles under that category.
 
[breadcrumb]
World name Category 1 Category 2 Article title
In a real breadcrumb, clicking on each category would display all articles under that category.
 
[tagged:#example|list]

Example

Tagged article
Another tagged article
 
[taggedblocks:#example|list]

Example

Tagged statblock
Another tagged statblock
 

Follow buttons

[follow:Username]

[follow:7c0fec4d-9436-4325-90f5-cdbfdd3932b6]
Follow World Anvil Codex
 

Embed external content

The tag below is available to all Guild subscription tiers. Upgrade here.

[pdf:https://media.wizards.com/2019/dnd/downloads/UA-ClassFeatures.pdf]
An interactive PDF embed would appear here.
 

Tags below available to all users, regardless of subscription tier.

 
[spotify:https://open.spotify.com/track/65HwVl7poaAoBbJGZYFhNT?si=ce2e50e24ead404e]
Embed options for YouTube, SoundCloud, Sketchfab, and more are also available.
Click here to learn more about embedding external media content.
 
[discord:348060277989965844]
 

Current world date

[currentdate:f32bfb47-cf7a-4fc4-bcfe-37018b4f1cf4]
Year 100 after the Anvil
 

User links and information

[user:Dimitris]

[usercard:Dimitris]

Forgemaster Dimitris

Dimitris Havlidis
               

World Anvil Founder & Chief Grease Monkey
Twitter | World Anvil Changelog
“No act of kindness, no matter how small, is ever wasted.” - Aesop


 
 

Creative Commons licenses

[licence:cc-by]
[licence:cc-by-sa]
[licence:cc-by-nc]
[licence:cc-by-nd]
[licence:cc-by-nc-sa]
[licence:cc-by-nc-nd]
 

Visibility controls

Tags below available to the Grandmaster subscription tier and above. Upgrade here.

 
[userstate:follower]This content will only be showed to followers of your world![/userstate]
(In a real article, the sentence between the tags would be displayed only to readers who follow the world)

[subcontainer:ID]Private content here[/subcontainer]
(Content between the tags is displayed to the given subscriber group only)

[container:custom-class]Content here will be displayed with custom CSS style based on the specified selector.[/container]
Content here will be displayed with custom CSS based on the specified selector.