BBCode Tags
Restructuring the Codex
We are currently moving articles around and changing the general structure of the Codex. Please come back later if you get lost!Using BBCode to format your text
Or keep reading for advanced tips and tricks from our amazing community of power users!
How to use BBCode tags
A BBCode tag is a code between square brackets (for example, [b]). The code, b in this case, determines the effect of the tag - making the text bold. The tag's effect is applied to anything in between two tags with the same code. Most tags have an opening and a closing variant. The closing variant always has a forward slash ( / ) right after the opening bracket ( [ ). Make sure to always close all the tags you open as it can be very problematic if you do not. Often this will cause the entire view to be broken. There are some tags that don't need closing, such as for paragraph breaks or media embeds. Just look at the example provided for each tag to see if there's a closing tag. Additionally, some BBCode tags have options which are separated with a colon ( : ) from the tag name. Multiple options are usualy separated with the pipe character ( | ).List of BBCode tags
The following list has all BBCode tags available to free accounts, organized by type. They contain an example and a short explanation when needed. If you are a Guild Member (that is, you have a paid subscription), don't forget to look at the Guild BBCode list too:Basic formatting tags
Headers
You can go down to four levels of headings. This is how they look:[h1]H1 Example[/h1]
H1 Example
H2 Example
H3 Example
H4 Example
Font Effects
You can use the usual font effects as in any other text processor.[b]Text using bold[/b]
[i]Text using italics[/i]
[u]Text using underline[/u]
[s]Text using strikethrough[/s]
This [redacted:4] is redacted
[small]This is smaller[/small]
This is [sup]superscript[/sup]
This is [sub]subscript[/sub]
Now I can display [noparse][b]BBCode tags[/b] with the noparse tags.[/noparse]
[dc]T[/dc]his is a fancy drop cap to put in the first line of your article. Looks better with a longer paragraph!
Notes
- The [redacted] generates a number of "redacted squares" (█) equal to the number you input inside the tag. You don't need to close this tag.
- The [noparse] tags tell the system to treat BBCode tags as regular text. Any BBCode tags between the noparse tag will not have any effect and will be displayed in presentation view.
Layout Boxes
These tags wrap text in different kinds of containers with a special layout.[quote]This is a quote.|Author[/quote]
This is a quote.
This text looks like code
Tooltips
Paragraphs & Separators
Use these tags to tweak how paragraphs are separated.This is paragraph one.
This is paragraph two. Adding a completly empty line (even without spaces!) will create a paragraph separator.
This is paragraph one. This is paragraph two. Adding a completly empty line (NO spaces!) will create a paragraph separator.
[br]
[br]
This is paragraph two. Each "br" is a line break, so this has a wider separation than usual.
This is paragraph two. Each "br" is a line break, so this has a wider separation than usual.
[hr]
This is paragraph two, with a clear visual separation.
This is paragraph two, with a clear visual separation.
Any text after it will be moved to the next line.
Text alignment
Use these tags to choose where the text is aligned.[left]This text is aligned to the left (default alignment)[/left] [center]This text is in the center[/center] [right]This text is in the right[/right] [justify]This text is justified on both sides. This visually works best with paragraphs of text and can look fantastic when formatted into columns as demonstrated further on in this guide. Putting justify BBCode around a body of text will automatically stretch the spacing out to fill a space rather than have the edges of a paragraph at different lengths.[/justify] [concol]This text is in the center with wide margins. This also works best with paragraphs or texts so you can better see the margins[/concol] [rtl]This text is aligned to be read from right to left. Useful for languages with this writing direction.[/rtl]
Lists
Lists can be either unordered with bullet-point items, or ordered for a numbered list.[ul]
[li]Item 1[/li]
[li]Item 2[/li]
[/ul]
- Item 1
- Item 2
[ol]
[li]Item 1[/li]
[li]Item 2[/li]
[/ol]
- Item 1
- Item 2
[ul]
[li]Item 1
[ol]
[li]Sub-item 1[/li]
[li]Sub-item 2[/li]
[/ol]
[/li]
[li]Item 2[/li]
[/ul]
- Item 1
- Sub-item 1
- Sub-item 2
- Item 2
- Item 1
- Item 2
-- Item 2.1
-- Item 2.2
- Item 3
Checkboxes
You can use a number of tags to create checkbox icons. Note that, while they are useful to create checklists, they aren't technically considered as such, so you will still need to use line breaks to separate them (or put them inside a regular list).[] Empty
[c] Checked
[r] Right chevron
[l] Left chevron
[x] Failed
[+] Plus
[-] Minus
Empty
Checked
Right chevron
Left chevron
Failed
Plus
Minus
RPG Icons
These BBCode tags can be used to display RPG system specific icons in articles to enrich session reports or skill descriptions.Pathfinder Action Icons
[pf:1a]
[pf:2a]
[pf:3a]
[pf:ra]
[pf:fa]
[pf:pa]
Genesys Dice Symbols
[genesysdice:boost]
[genesysdice:difficulty]
[genesysdice:ability]
[genesysdice:challenge]
[genesysdice:proficiency]
[genesysdice:advantage]
[genesysdice:threat]
[genesysdice:failure]
[genesysdice:success]
[genesysdice:triumph]
[genesysdice:despair]
b
d
d
c
c
a
h
f
s
t
d
Links
There are different ways of linking in World Anvil, depending on the kind of content you're linking to:Article links
@[Guide to BBCode Commands](article:6a1a7029-64c8-468b-9f9a-6b0b367f7601)
Guide to BBCode Commands
World links
[world:7c0fec4d-9436-4325-90f5-cdbfdd3932b6]
World Anvil Codex
To get the world ID, use the World Widgets panel in the world configuration page.
External links
[url:https://blog.worldanvil.com]World Anvil Blog[/url]
World Anvil Blog
[url:https://blog.worldanvil.com|tab]World Anvil Blog (Opens in new tab)[/url]
[url:https://blog.worldanvil.com|parent]World Anvil Blog (Opens in parent frame)[/url]
Key-Values
Key-Values can be used to create a custom definitions list. Some usecases might be to list the scientific classifications of a species, or a stats or equipment list for a Character article. This format is the same as many of the pre-defined Sidebar fields in several templates. Examples:--The Key::The Value--
Media and widgets
This section deals with all sorts of embedding, from images to licenses and world content.Pin icons
You can use BBCode to embed any pin icon that can be used in a map. You can see all pins and copy their codes by pressing Alt+Enter while editing a map.[pin:flat_black_alchemist]
Tables of contents
Uses these tags to generate automatic tables of contents on different levels.Breadcrumb
You can automatically generate the path to that article using the article's category organization.[breadcrumb]
Lists of tagged articles
You can generate automatic lists of all articles with a specific tag using the [tagged:TAG|TYPE|TITLE] BBCode. Each of the parts in UPPERCASE is a different parameter you can set:[tagged:#BBCode|block|Articles Tagged with #BBCode]
[taggedblocks:#test-tag|Example Block List]
Example Block List
Article blocks
Instead of the regular linking methods explained above, you can also embed an article with better formatting:[articleblock:dc2144d5-abc1-4553-81a5-b9c62f723cc9]
The ID is the same ID you use to link to the article using the regular mention linking system. For more information, take a look at the Articleblocks guide.
Categories
There are four options to embed or link to categories:[category:6fba5523-5ebd-49c8-b659-81e3d7352f6a]
[category:6fba5523-5ebd-49c8-b659-81e3d7352f6a]Custom title[/category]
[toc:6fba5523-5ebd-49c8-b659-81e3d7352f6a]
[toc:6fba5523-5ebd-49c8-b659-81e3d7352f6a|horizontal]
[book:6fba5523-5ebd-49c8-b659-81e3d7352f6a]
All of these tags can be copied from the settings page of the category you want to link to.
Maps
Use these tags to embed maps into your articles.The first two numbers after the ID (737 and 460) are the X and Y coordinates of the default center point for this embed. The third number (200) is the zoom level.
These three numbers are optional, so you can also embed a map without them, as such:
[map:d359e84b-f549-4fd4-8999-a8566e491c41]
RPG blocks
If you're using RPG features, use these tags to embed RPG blocks in your articles:[blocklink:84]
Grappler
For some character sheets, you can also add tracking or badge as parameters (of example, [block:id|tracking] or [block:id|badge]. A badge sheet contains a summary of the most important character stats. The tracking sheet lets you (or anyone with access to the article) to edit the sheet from presentation mode.
Grappler
Strength 13 or higher
You’ve developed the skills necessary to hold your own in close--quarters Grappling. You gain the following benefits:
Timelines
Use these tags to embed timelines and historical events:[timeline:a49239bc-b632-4a22-97c7-1e2cadee8b57]Check out this timeline![/timeline]
Check out this timeline!
Dice roller
Use this to embed a virtual dice roller anywhere:[roll:1d6+4]
1d6+4
Follow button
Use this to add a button anywhere that, when clicked, will make the user follow your world:[follow:ondo]
[follow:7c0fec4d-9436-4325-90f5-cdbfdd3932b6]
World meta
If you have used the world meta feature (accessible from the world dashboard) you can use the [worldmeta] tag to embed sections of it, using this syntax:[worldmeta:ID|SECTION]The ID is the world id (you can get it in the World Widgets panel of the configuration page). SECTION can be imagery, music, literature, or otherinspiration to embed any of these sections.
Current date
You can embed the current world date anywhere on your world using the following tags. The current date is set from the world configuration, Date & Time tab. You can copy the current date widget code from the same page, in the World widgets right panel.[currentdate:7c0fec4d-9436-4325-90f5-cdbfdd3932b6]
(this is the default "current display date"; not available in the Codex)
Creative Commons Licenses
There is a set of BBCode tags that generate the different Creative Commons license icons:More information on what these license mean can be found in the Creative Commons Foundation web site.
Images
Use the Images & Files page to get the code for an image:This tag adds the image with its name, credit, and description in a formatted block.
Both tags have options to tweak different settings such as size, alignment, and background color. Check the guide to images for more information:
User tags
You can easily link to World Anvil user profiles or even display a small panel with the user's basic profile.Embedding media players
World Anvil allows embeds from several external websites: Spotify, YouTube, SoundCloud, LibSyn, BandCamp, PodBean, Kuula, and Discord.[spotify:spotify:track:1TfpkyDqRkZj2bVHlG22e0]
[spotify:spotify:playlist:1TfpkyDqRkZj2bVHlG22e0]
Check the Guide to Embedding 360º Images for more information
Read Embedding the Discord Widget for more information
Advanced formatting
Anchors
You can use anchors to link to specific parts of an article; usually a header, but you can place an anchor anywhere on an article.Header anchors
[h3|anchor-example]Anchor example[/h3]
Anchor example
Non-header anchors
[anchor|not-a-header]
(it's invisible, but it's here!)
Linking to anchors
Header and non-header anchors work the same:[url:#anchor-example]Header anchor example[/url]
[url:#not-a-header]Non-header anchor example[/url]
If you want to link to an anchor from a different article, you need the full article URL. For example, [url:https://www.worldanvil.com/w/WorldAnvilCodex/a/bbcode#anchor-example]Link to external anchor[/url] (note the last part of the URL, which is the anchor name with the # character).
Tables
World Anvil has three kinds of tables. Block tables are explained in the Guide to Blocks, and interactive tables (Guild-only) are explained in the Guide to Tables. This explains the third kind, BBCode tables.[table]
[tr]
[th:20]Name[/th]
[th:40]Description[/th]
[th:20]Damage[/th]
[th:20]Notes[/th]
[/tr]
[tr]
[td:20]Longsword[/td]
[td:40]Big Pointy Stick[/td]
[td:20][roll:1d8][/td]
[td:20]Sharp[/td]
[/tr]
[/table]
Name | Description | Damage | Notes |
---|---|---|---|
Longsword | Big Pointy Stick | 1d8 | Sharp |
Columns
Use columns to divide your text in two (or more) parallel sections.[row]
[col]This is the left column.[/col]
[col]And this is the right column![/col]
[/row]
[col3]This is the left column.[/col3]
[col3]This is the middle column.[/col3]
[col3]And this is the right column![/col3]
[/row]
Guild Features
If you are a Guild Member, you have all these BBCode tags at your disposal plus the ones in this other list:Contents
Tips & Tricks
- The BBCode Reference panel is available to the side of all articles for easy access and has a list of useful examples.
- You can use BBCode in the sidebar panel content, footnotes and even in your own notes in worldanvil!
- It's important to consider visual hierarchy in your articles, so try and make the things you want people to look at first bigger and bolder.
- Most resources created in WorldAnvil can be added to an article with a BBCode. You can always copy these codes where you created these resources.
- If you need further help with formatting, hop on the WorldAnvil discord and ask an in the help channel for assistance!
could you possibly explain, how to add images into an article? as in directly within the area, where text is normally contained. I would be very appreciative, as I am a visual artist before a writer, and feel that diagrams explain the natural laws in my universe, in a much more concise, and easily understandable manner, than a wall of text. thank you, for listening to my request.
Sure thing! I'll add this to the guide (it's in need of some TLC), but a quick answer for you - go to your world's image library https://www.worldanvil.com/world/image/list and upload an image. In the top corner it should provide you with a BBCode link such as
Thanks so much TJ! I've got it to work. :) Now I just need to play with it enough to get the hang of using it alongside formatting. trial and error time!