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

[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.


[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

2nd H2O

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 left.

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.

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

Nesting

Lists can also be nested.

  1. https://www.fimfiction.net/story/351583/a-new-kind-of-dead
  2. List item 2
  3. List item 3
  4. 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

T The Keepers of Discord
Being a statue can drive you mad, yes?
Hoopy McGee · 11k words  ·  5,427  78 · 41k 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.

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:

:yay:
Comments ( 24 )
  • Viewing 1 - 24 of 24
knighty
Site Owner

3169
And the comment of the year award goes to...

The tag doesn't work as of the update. I would appreciate it if you fixed it, because then I could actually talk like a robot.

YOur textboxes cause BB code you paste into them to break... Copy this BB and paste it into any text box on this website and you'll see what I mean. Please fix this... It breaks my workflow.

[img]http://orig04.deviantart.net/66b6/f/2017/087/8/1/ark_age_thumbnail_by_meepthechangeling-db3wdd5.png[/img][size=1.2em][b][i]Court Station 38 - Corperate Republic[/i][/b][/size]   [size=1.2em][b][i]Epoch 19005184284[/i][/b][/size]

2997
This section appears to be missing "oldest first/newest first" comment order option …and defaults to newest-first. Blech.

Question: is there a reason why the quote box border is missing?

3133 That used to work, but then I changed something and it got lazy, but it is fixed now! :rainbowkiss::rainbowkiss::rainbowkiss:

3132 Cool! Why write a script when you can make a web page? :rainbowderp:

(It misses the final tag, BTW.)

3061
How’d you do the rainbow text? Did you color each letter individually?
I’m guessing you wrote a script to generate the BBCODE.

3122
The comment section is probably one of the biggest security vulnerabilities in this site. That’s now been remediated with this update. The question is: has other ares of user input had the same treatment? :duck:

3074
Short answer: Security.

It will have to be parsed server side, no matter which is used. For html, the parsing would be done in order to ensure that no malicious html makes it through intact. But if malicious users find a bug that allows plain html through, there's potential for a major problem.

For BBCode, since no html is allowed, any and all html can be treated identically, just convert < > to their corresponding entities. A bug in the parser that lets through plain bbcode is no security issue, and a bug that lets through plain html becomes tremendously less likely.

So how do we align images on the left or the right in stories now? Because

and

no longer work and any drawings that I’ve put in my stories that use that are now just... screwed.

The maximum size for text is 2em, and the smallest is 0.5em.

Aw, I'm going to miss having fun with changing those sizes somewhat...

3076
To each their own. I am a coder and have used < > thousands of times so it’s just second nature now.

3074
< > needs you to hit shift to type, while [ ] doesn’t. I’ll side with [ ], thank you.

2997
Why not use HTML instead of BBCode? HTML is similar and coders out there would have an easier time with it. Then again I just like using < > instead of [ ].

Okay, thanks very much for adding this page. I'm not sure why we need a no-linebreaks codetag, though?

At long last, I can play Hotline Miami music anywhere.
Didn’t really think of doing that in the first place, but I’ll take it anyway~
Thanks Knighty.

.

a

b

c



#include <fuck>
template<typename T>
class Cancer { T bees; };

ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao ayy lmao AYY LAMO

The syntax highlighting did not work in the preview or when I posted this. It worked upon refresh, though. It also broke again when I edited this.

I can’t read on my phone either! what is going on? like i get on my fimfiction account and all i get to see is a big window covering most of my rage with my account on it! please fix it!

Please switch back I cannot read Fimfiction on my Ipohne4 all I get is a half blue screen with my profile on it :ajbemused:

And no anchors? :applecry:

knighty
Site Owner

BBCode is totally rad :rainbowdetermined2:

  • Viewing 1 - 24 of 24
Login or register to comment