Fimfiction BBCode Guide

This entire page is written in bbcode in order to demonstrate the kind of functionality it provides.

The BBCode parser is very robust and will tolerate a large amount of dodgy tag placement while generating valid output but it is a good idea to try and write valid bbcode to prevent potentially unexpected output.

Not all BBCode can be used everywhere, for example user bios only support basic formatting and sometimes output will vary slightly depending on location.

All BBCode tags are also case insensitive, so [b] is the same as [B].

Chapter Formatting

Paragraphs

Paragraphs are automatically created when you leave 2 line breaks between text content. For chapters, a single line break and an indented line will also result in a paragraph.

Typically this knowledge will not be required but in chapters it is important that your work is broken down into paragraphs that will be recognised by the parser. Failure to do this will mean your story is breaking rules as paragraphs are essential to client side formatting options and things like text to speech and bookmarking.

This will create

a paragraph

This will also create
   a paragraph

Please see our paragraphs article for a more in-depth explanation of paragraphing in stories.

`[indent]` Indent

The indent tag can be used to, unsurprisingly, indent portions of your text.

[indent]The indent tag can be used to, unsurprisingly, indent portions of your text.[/indent]

It also support levels of indenting

Up to 4 levels deep

[indent=2]It also support levels of indenting[/indent]
[indent=4]Up to 4 levels deep[/indent]

`[pre-line]` Pre-line

Preformatted lines keep line breaks as you enter them.
This is useful for things like lyrics or poetry where you don't want indented paragraphs.

This text here would be indented if the reader has indented on,
but because we're in pre-line it remains unindented.

[pre-line]Preformatted lines keep line breaks as you enter them.
This is useful for things like lyrics or poetry where you don't want indented paragraphs.

This text here would be indented if the reader has indented on,
but because we're in pre-line it remains unindented.[/pre-line]

These two tags can be happily mixed
which is useful for embedded lyrics
or things like letters.

[indent=2][pre-line]
These two tags can be happily mixed
which is useful for embedded lyrics
or things like letters.[/pre-line][/indent]

Notes

You should keep in mind that the transition from bbcode to final result is not guaranteed to be stable. We may make changes to how the system works in order to facilitate new functionality or fix problems. When in doubt, it's best to try and keep formatting as simple as possible to minimise the chance of breakage later.

Try to use the tags provided for formatting rather than trying to be clever. Remember, people are viewing your work on all kinds of devices, and that means quirky formatting can lead to a poor experience when viewed on a device you didn't author it on!

Inline Formatting

Inline formatting is simple formatting that is applied to parts of your text. Importantly, it can span across paragraphs, so you could entirely encase a post in a bold tag and it'd carry across all paragraphs in your text.

`[b]` - Bold

This is an example of bold text

[b]This is an example of bold text[/b]

`[i]` - Italics

This is an example of italicised text

[i]This is an example of italicised text[/i]

`[u]` - Underline

This is an example of underlined text

[u]This is an example of underlined text[/u]

`[color]` - Color

This is an example of red text using a named color
This is an example of blue text using hex colors

[color=red]This is an example of red text using a named color[/color]
[color=#0000ff]This is an example of blue text using hex colors[/color]

The color bbcode supports css named colors such as "red", as well as hex colors in the format "#abcdef". 3 character hex codes also work, such as "#f00" for red.

`[opacity]` - Opacity

The [opacity] tag is similar to [color], except it controls the transparency of text. This is primarily intended as an alternative to setting text to gray to make it "fade out" that works on both dark and light background colors. Keep in mind that fading the text out will reduce the contrast, which may make it difficult for some users to read, so this should be using sparingly. The opacity can be specified as either a percentage or a decimal between 0.0 and 1.0.

This is 75%
This is 50%
This is 25%

[opacity=75%]This is 75%[/opacity]
[opacity=.5]This is 50%[/opacity]
[opacity=25%]This is 25%[/opacity]

`[size]` - Size

This text is large
This text is small
This text is also large

[size=2em]This text is large[/size]
[size=0.5em]This text is small[/size]
[size=32]This text is also large[/size]

When using absolute sizes, 32 in this case, the value is translated into a relative value with 16 as the default. So in this case, 32 acts the same as 2em. The maximum size for text is 2em, and the smallest is 0.5em.

`[smcaps]` - Small caps

Small caps can be used to make content look more important without resorting to full-size caps

[smcaps]Small caps can be used to make content look more important without resorting to full-size caps[/smcaps]

`[s]` - Strikethrough

Strikethrough is ~~uesd~~ used for correcting content

Strikethrough is [s]uesd[/s] used for correcting content

`[mono]` - Monospace

Monospace text is useful sometimes for emphasising things like letters in story content.

[mono]Monospace text is useful sometimes for emphasising things like letters in story content.[/mono]

Inline Containers

Inline container tags are like inline formatting but they cannot be used across paragraphs.

`[strong]` - Strong

This is an example of strong text

[strong]This is an example of strong text[/strong]

Strong will usually just mean bold text but can vary depending on context. It can also be nested too, but usually will not change anything.

This is some extremely strong text

[strong]This is some [strong]extremely strong[/strong] text[/strong]

`[em]` - Emphasis

This is an example of emphasised text

[em]This is an example of emphasised text[/em]

Emphasis usually just means italicised but can vary depending on context. It can also be nested like strong.

This is some nested emphasised text

[em]This is some [em]nested emphasised[/em] text[/em]

`[sub]` `[sup]` - Subscript and Superscript

2^nd H₂O

2[sup]nd[/sup] H[sub]2[/sub]O

`[spoiler]` - Spoilers

This text is marked as spoilered

[spoiler]This text is marked as spoilered[/spoiler]

Spoilered text can be revealed by hovering over or tapping on a mobile device.

Block Formatting

Block level formatting created entirely separate blocks of styled content. It cannot be applied inline.

`[h1-6]` - Headers

Headers with sizes ranging from 1-6, where 1 is the biggest, can be declared with the header tag. All the headers on this page use this tag.

[h1]Very Large header[/h1]
[h2]Large header[/h2]
...etc

It is suggested that you headers in order not by size, but by number. The top level headings in your content should be h1, then h2, etc.

`[hr]` - Horizontal Rule

Horizontal rules can be used to divide up scenes in stories or just make long bodies of text more segmented and easier to read. You can see them all over this guide between sections for this purpose.

[hr]

`[quote]` - Quote

Quotes can be used to highlight content from elsewhere you wish to comment upon

[quote]Quotes can be used to highlight content from elsewhere you wish to comment upon[/quote]

Quotes can also be given an argument to show who it was written by.

You're banned

[quote=knighty]You're banned[/quote]

`[center]` - Center

Center aligned text can be useful for certain content in stories

[center]Center aligned text can be useful for certain content in stories[/center]

`[right]` - Right

Right aligned text is a little less common...

[right]Right aligned text is a little less common...[/right]

`[pre]` - Pre

pre lets you creates a block of monospaced text.
   It will preserve tabs and     lots    of   whitespace

[pre]pre lets you creates a block of monospaced text.
   It will preserve tabs and     lots    of   whitespace[/pre]

`[figure]` - Figure

Figures let you include self contained content. The primary use currently is for adding content floated to the left / right.

Floated Content

This is an example of floated content. The image shows to the left of the text and text will flow around the bottom of it if it reaches down there.
On mobile, floated figures will no longer float and show up where you entered them in your bbcode. Therefore you should not assume that your floated figure will actually always be floating. It's more of a hint.
This text probably flowed around the bottom, depending on what you're viewing it on.

By including it in a [quote], we make sure that this text ends up below.

[quote]
[figure=left][img]https://derpicdn.net/img/view/2015/4/1/861907.png[/img][/figure]

This is an example of floated content. The image shows to the left of the text and text will flow around the bottom of it if it reaches down there.

On mobile, floated figures will no longer float and show up where you entered them in your bbcode. Therefore you should not assume that your floated figure will actually always be floating. It's more of a hint.

This text probably flowed around the bottom, depending on what you're viewing it on.
[/quote]

By including it in a [code][quote][/code], we make sure that this text ends up below.

[figure=right] is used in the same way but, predictably, floats the content to the right.

Lists

Lists let you create properly formatted lists with any content you want inside them.

List Item 1
List Item 2
List Item 3

[list]
[*]List Item 1
[*]List Item 2
[*]List Item 3
[/list]

Ordered Lists

The list bbcode supports a variety of list types for basic, numeric and alphabetical lists.

List Item 1
List Item 2
List Item 3

[list=a]
[*]List Item 1
[*]List Item 2
[*]List Item 3
[/list]

Nesting

Lists can also be nested.

https://www.fimfiction.net/story/351583/a-new-kind-of-dead
List item 2
List item 3
Hmmm
- Nested Item 1
- Hmmm
  - Nested Item 1
  - Nested Item 2

[list=1]
   [*]https://www.fimfiction.net/story/351583/a-new-kind-of-dead
   [*]List item 2
   [*]List item 3
   [*]Hmmm
   [list]
      [*]Nested Item 1
      [*]Hmmm
      [list]
         [*]Nested Item 1
         [*]Nested Item 2
      [/list]
   [/list]
[/list]

Full list of list types

[list=1] - Numeric
[list=a] - Lower Alpha
[list=A] - Upper Alpha
[list=i] - Lower Roman Numerals
[list=I] - Upper Roman Numerals

Links

Links to other websites and pages on the site can be provided in a variety of formats.

https://www.fimfiction.net
A blank link will be automatically marked as a clickable link.
Fimfiction
```
[url=https://www.fimfiction.net]Fimfiction[/url]
```
The [url] tag can be used to provide text for the link to show instead.
knighty
```
[url=/user/1/knighty]knighty[/url]
```
Relative URLs allow you to link to pages on the site. You don't have to use them but they are preferable as any domain changes and such will not affect them.

Email

Emails can be placed into a clickable link with the [email] tag.

knighty@fimfiction.net

[email]knighty@fimfiction.net[/email]

Images

[img]https://derpicdn.net/img/2016/6/30/1190220/large.png[/img]

Images are limited in their displayed size and can be clicked to enlargen. In comments a clickable link will be shown instead to prevent spam issues.

Embeds

Fimfiction supports embedding of content from a variety of different sources. Typically a thumbnail is shown which makes embeds very lightweight so feel free to use them as much as you want!

Fimfiction Story Embeds

TThe Keepers of Discord

Being a statue can drive you mad, yes?

Hoopy McGee · 11k words · 6,569 90 · 61k views

[embed]https://www.fimfiction.net/story/25125/the-keepers-of-discord[/embed]

A maximum of 20 story embeds are allowed for performance reasons.

Youtube

[embed]https://www.youtube.com/watch?v=m7ufD3aW-_8[/embed]

The URL provided can be any valid Youtube URL.

Gfycat

[embed]https://gfycat.com/OffensiveJitteryAmericantoad[/embed]

Twitch.tv

twitch.tv/knighty33

[embed]https://www.twitch.tv/knighty33[/embed]

Miscellaneous

Page Break

The [page_break] tag can be used in blog posts to designate an intro section which is shown on lists of blog posts

Here's the start of my blog post we're going to use as the intro!

[page_break]

Here's the rest of the post!

Code and CodeBlock

The [code] tag lets you insert a block of monospaced text that will display exactly as you input it. It will not mark up any bbcode inside of it.

[b]Note the bold tag is displayed and does not make the text bold[/b]

[codeblock] lets you insert multiline code. The blocks you see in the above examples are all using the [codeblock] tag.

Line 1
Line 2

You can also provide a language for syntax highlighting. eg. [codeblock=javascript] and [codeblock=bbcode]

function* fibonacci() {
   let x = 0;
   let y = 1;

   while( true ) {
      const z = x + y;
      yield z;
      x = y;
      y = z;
   }
}

// Outputs the fibonacci sequence until we hit a number > 1000
for(let i of fibonacci()) {
   console.log(i);
   if (i > 1000) break;
}

All of the [b]BBCode[/b] examples you see on this page use this.

Math and MathBlock

TeX syntax math can be typeset using the [math] tag. This will place the math inline with the rest of the text.

For example, the Pythagorean theorem is a^2 + b^2 = c^2

[mathblock] is used for larger formulas to display them in their own paragraph. For example, the quadratic formula:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

[mathblock]x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}[/mathblock]

Icons

Icons from font awesome can be declared with the icon tag.

[icon]star[/icon] [icon]book[/icon] [icon]group[/icon]

Any icon from font awesome can be used by stripping the "fa-" from the front of the name. They can be colored and sized with the respective tags.

[color=red][size=2em][icon]star[/icon][icon]star[/icon][icon]star[/icon][icon]star[/icon][icon]star-half-o[/icon][/size][/color]

Emoticons

Fimfiction has a variety of emoticons that can be selected from the emoticon drop down. They are in the format of :emoticon:

:yay:

BBCode Guide

Fimfiction BBCode Guide

Chapter Formatting

Paragraphs

[indent] Indent

[pre-line] Pre-line

Notes

Inline Formatting

[b] - Bold

[i] - Italics

[u] - Underline

[color] - Color

[opacity] - Opacity

[size] - Size

[smcaps] - Small caps

[s] - Strikethrough

[mono] - Monospace