Reference BBCode Reference

[Kyng]

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

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. As such, I've spoilered each section, so you can open it up individually:

1. Basic Text Formatting (Bold, italics, underlining, etc.)

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

• [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 (alignments, sizes, superscripts, subscripts)

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:

Code:

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: x² + y² = z²
Johnny was a chemist, Johnny is no more, for what he thought was H₂O, was H₂SO₄!

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 quote and code will look on the board:

Quote text

Code:

Code text

(You've already seen what the spoiler box looks like... you've just opened one in order to read this !)

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

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 )

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:

Code:

[img=300x225]https://live.staticflickr.com/2834/9453182365_a5b9856735.jpg[/img]
[source link="https://www.flickr.com/photos/[email protected]/9453182365/in" licence="https://creativecommons.org/licenses/by-sa/2.0/"]Kyng[/source]

This will come out as:


(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 !)

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:

Code:

[list]
[*]First item
[*]Second item
[*]Third item
[/list]

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:

Code:

[list=1]
[*]First item
[*]Second item
[*]Third item
[/list]

However, lists are only one way to display data. Another method is to use tables - and, that can be done on here too. A full guide to tables can be found here - but, put simply, 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:

Code:

[twitter]https://twitter.com/coffee_house_zb/status/1137692610607403009[/twitter]

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 ):

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:

Code:

[instagram]https://www.instagram.com/p/BrK5gIfFTDo/[/instagram]

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



Just one section to go now !

7. Miscellaneous (Pokémon, flags, horizontal lines, FontAwesome icons)

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:
  
  
  Code:

  [pokedex]001[/pokedex] (or [pokedex]001.png[/pokedex])
  
  
  will give you a Bulbasaur:
  
  
  
• Another is the [icon] tag, which will allow you to post Font Awesome icons. For example, posting the following:
  
  
  Code:

  [icon=heart]
  
  
  Will give you a heart shape:
  
  
• Then there's the [flag] tag, which allows you to post a wide range of flags. For example, [flag=canada] will give you the flag of Canada:
  
  Yes, this may seem a little useless, because all the country flags are available as emoticons on the main board . However, the [flag] tag even works for the historical/regional flags and the sports flags that are listed in separate threads! For example, [flag=catalonia] will get you the flag of Catalonia:
  
  
• 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 !

[Detective Osprey]

Ah, looks nice!

[Moonshroom]

This is awful... ly useful.

Awesome work CJ!

[Megan]

This should be super helpful!

[Kyng]

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 .

[Kyng]

I've added the [icon] tag, for FontAwesome icons.

Also got rid of the GIFV and WebM tags, since those were never used; the GIFV can be done with [img] tags anyway; and the member who asked for these tags has been gone for three years anyway .

[Kyng]

Added a link to the full Table Guide, which I completely forgot we had .

[Kyng]

Since this thread is so long, I've broken it down into spoilers .

I've also added the [flag] tag, which allows you to post any of my CaffEnsigns flag emoticons (including the historical/regional flags and the sports flags that are listed in separate threads). For example, [flag=bavaria] will get you the flag of Bavaria:



Have fun !