The Coffee House

Full Version: BBCode Reference
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Throughout the forums, you'll see all kinds of formatted text in people's posts. Some text will be big, or small, or coloured; it might link to another page; it might come with images or videos; or you might even see people posting tweets or Pokémon on here! This post is intended as a complete guide on how to do all of that (I say 'intended', because I've included everything I can think of, but I suspect I've missed a couple of things :lol: ).

For your convenience, I've divided it into seven sections:

  1. Basic text formatting;
  2. More advanced text formatting;
  3. Quote, code, and spoiler boxes;
  4. Images and videos;
  5. Lists and tables;
  6. Twitter and Instagram;
  7. Miscellaneous

Since this guide is just intended as a reference, it's not exactly a page-turner - so, it's probably best to go to the section you need, rather than reading it all from start to finish.

Anyway, with the intro stuff done, it's time to get on to some actual BBCode:

1. Basic text formatting

Unless you're completely new to forums, you can skip this section - except maybe the last little bit :P .

  • [b][/b] - Bold text
  • [i][/i] - Italic text
  • [u][/u] - Underlined text
  • [s][/s] - Strikethrough text
  • [font=Comic Sans MS][/font] - The world's worst font
  • [color=green][/color] - Green text (Use either a colour name or a Hexadecimal colour code)
  • [url=Link URL here]Link Text[/url] - Link Text

And, finally, one that even experienced forum users might not be familiar with:

  • [highlight][/!highlight] - Highlighted text

2. More advanced text formatting

This section deals with alignments, sizes, superscripts and subscripts. These might be a bit different from on some other forums, so even if you're familiar with how a forum works, it's still worth reading through this section:
  • [size=large][/size] - Make text xx-small, x-small, small, medium, large, x-large, or xx-large.
  • [align=center][/align] - Align text to the left, center, or right of the screen.
  • [sup][/sup] - Superscript text
  • [sub][/sub] - Subscript text

There's also an alternative, more "markdown-y" way to do the superscripts and subscripts, as follows:

Pythagoras' Theorem: x^(2) + y^(2) = z^(2)
Johnny was a chemist, Johnny is no more, for what he thought was Hv(2)O, was Hv(2)SOv(4)!

Pythagoras' Theorem: x2 + y2 = z2
Johnny was a chemist, Johnny is no more, for what he thought was H2O, was H2SO4!

3. Quote, Code and Spoiler Boxes

You'll sometimes see people including 'quote' boxes in their posts (to quote a previous member), 'code' boxes (to post markup code), or 'spoiler' boxes (to hide something that they don't want people to see by mistake). All three have quite similar syntax:

  • [quote=Author]Quote Text[/quote]
  • [code]Code text[/code]
  • [spoiler=Spoiler Header]Spoiler text[/spoiler]

And here's how the above three boxes will look on the board:

Author Wrote:Quote text

Code text

Spoiler Header

If you want to share a small snippet of code, but don't want to have it in a box, there are a couple of ways to do this:

  • Use the [icode][/icode] tag to type Inline Code;

  • Add an '!' before the tag name; for example, typing '[!b]' will just print the '[b]' tag. This is effectively a replacement for the '[nocode]' tag that ZetaBoards users will remember (and I've used it extensively throughout this post :lol: ).

4. Images and Videos

Often, you'll see people including images and videos in their posts - so, how do you do that? Here's how!

  • [img]URL of image here[/img] - Post an image
  • [thumbnail]URL of image here[/thumbnail] - Post a link to an image, with a thumbnail
  • [video=youtube]URL of video here[/video] - Post a YouTube video. (For another site, like DailyMotion, just replace 'youtube' with that site :P )
  • [gifv]URL of video here[/gifv] - Post a GIFV video (NOTE: Only works for GIFV videos hosted on
  • [webm]URL of video here[/webm] - Post a WebM video

Note that both the 'img' and 'thumbnail' tags allow you to specify a width and a height. You can do that by either of the following two methods:

  • [img=500x300]URL of image here[/img] - Post an image at a size of 500x300
  • [img=500,300]URL of image here[/img] - Another way to achieve the same thing

The other thing I should mention is linking back to where you found the image. While this isn't a rule, it's good to get into the habit of linking to the source of images that you post. This can be done by the following BBCode:

  • [source link="Link to source"]Name of source[/source]

Sometimes, if the image is released under a particular licence (for example, Creative Commons BY-SA 3.0), you'll also want to link to the licence. This can be achieved by the following BBCode:

  • [source link="Link to source" licence="Link to licence"]Name of source[/source]

So, let's put all of this together with an example. Here's a 300x225 version of one of my holiday snaps, with a source and licence link:

[source link="[email protected]/9453182365/in" licence=""]Kyng[/source]

This will come out as:

[Image: 9453182365_a5b9856735.jpg]
(Source: Kyng; View licence terms)
(By the way, there is one more way to post images: they can be embedded from Instagram. But, more on that further down :P !)

5. Lists and Tables

Throughout this post, I've been using bullet points to list groups of BBCode tags that go together. This is quite easy to do: you just use a [list] tag to start the list, and a [*] tag to mark each individual item. So, an example of a bullet-point list would look like this:

[*]First item
[*]Second item
[*]Third item

You'll also see that I used a numbered list at the beginning of the post, when I listed the seven different sections. This is very simple - just add "=1" to the end of the [list] tag, as follows:

[*]First item
[*]Second item
[*]Third item

However, lists are only one way to display data. Another method is to use tables - and, that can be done on here too. Our tables work in the same way as HTML tables - so, you build them out of the following four tags:

  • [table][/table] - At the start and end of the table;
  • [tr][/tr] - At the start and end of each row;
  • [th][/th] - At the start and end of each 'Header' cell;
  • [td][/td] - At the start and end of each normal cell.

As with the [img] tag, you can modify a couple of these to do special things:

  • You can specify a width (but not a height) - so, typing "[table width=500]" will make your table 500 pixels wide;
  • If you want a cell to run across multiple columns, then you can use 'colspan' to do this. For example, "[td colspan=3]" will give you a table cell that runs across three columns.

Yes, I'm aware that this is a very clunky way to do tables :( . I'll implement something better when I've thought of a good way to do that. Until then, there's an online BBCode table generator which is compatible with our setup; this makes things considerably less painful :) !

6. Twitter and Instagram

Sometimes, you'll find people embedding tweets pics into their posts. This is done in exactly the same way as an image - except that, instead of using an [img] tag, you use a [twitter] tag, as follows:


If you enter that code into your post, then you'll get this tweet (which I created as an example, specifically to show this feature off :P ):

Instagram is the same again - but, this time, you use an [instagram] tag. I don't have an Instagram account - so, this time, my example will be this image of Lewis Hamilton with his dog:


Type that in - and, sure enough, we see Lewis and his faithful companion:

Just one section to go now :) !

7. Miscellaneous

We do have a small number of tags that don't fit into any of the above categories - so, I'll just complete this guide by listing those.

One feature we have is a "Pokédex" code, where you can post a picture of any Pokémon, just from its number :) . For example, Bulbasaur is Pokémon #001, so:

[pokedex]001[/pokedex] (or [pokedex]001.png[/pokedex])

will give you a Bulbasaur:

Finally, you can draw a horizontal line by typing [hr] (no "[/hr]" needed: just the [hr] on its own is enough :) ). I'll often do this at the end of the main content of a topic, before adding my closing thoughts or remarks - so, it seems appropriate for me to end the guide with this:

So, that's the end of this guide to our BBCode. If you have any questions, or you can think of anything we've missed, then just let me know. Otherwise, have fun posting images and videos and links and whatever else you want to post :D !
Ah, looks nice!
This is awful... ly useful.

Awesome work CJ!
This should be super helpful!
I've updated this with a link to an online BBCode table generator, which works with the setup that we've got on here. This makes life much easier for anybody who wants to post tables on TCH.

I feel like I should include a link to this above, below, or to the side of the editor somewhere - although, I don't have any real preference as to where :P .