An example of BBCode that's ready to post for your users (a basic how to of BBCode)

bbcode.txt

This forum makes use of [Flarum](http://flarum.org) which so far has worked quite well but it lacks in documentation so I thought it might be worth trying to document a few things as I go so people understand how to better take advantage of the forums built in features. 

The forums support both Markdown and BBCode for post formatting, this article will attempt to make sense of the BBCode side of things. 

If you spot any errors or have any suggestions on how to better improve this article, please let me know below and I'm very much ripping off the [phpBB BBCode Guide](https://www.phpbb.com/community/help/bbcode). 

-----

## Text formatting

### Bold Text (text weight)
You can easily create text that is [b]bold[/b]

example:
[code][b]Hello[/b] World[/code]

becomes:
[b]Hello[/b] World


### Underlined Text

You can easily create text that is [u]underlined[/u] 

example:
[code]Hello [u]World[/u][/code]

becomes:
Hello [u]World[/u]

### Italicized Text
You can easily create text that is [I]italicize[/I]
example:
[code][I]Hello[/I] World[/code]

becomes: 
[I]Hello[/I] World

### Striked Out Text
You can create text that is [s]stricken[/s] out 

example:
[code][s]Hello[/s] World[/code]

becomes
[s]Hello[/s] World

#### Alternative
example:
[code][d]Hello[/d][/code]

becomes
[del]Hello[/del] World

### Coloring Text
You can create text of [color=red]various[/color] [color=blue]different[/color] [color=grey]colours[/color]

example:
[code][color=red]Hello[/color] World[/code]

becomes:
[color=red]Hello[/color] World

You can use the name of the colour for most common colours of if you prefer a more exact colour you can use a HTML Colour Codes 

example
[code][color=#FF5733]Hello[/color][/code]

becomes 
[color=#FF5733]Hello[/color] World

For further information on html colour codes visit a website like https://htmlcolorcodes.com

----
### Sizing Text
You can create text in various size from [size=2]small[/size] to [size=40]HUGE![/size]

example
[code][size=2]hello[/size] World[/code]

becomes
[size=2]hello[/size] World

You can also create larger text by increasing the number [code][size=N]hello[/size] World[/code]

example
[code][size=50]hello[/size] World[/code]

becomes
[size=50]hello[/size] World

### Center Text 
You can align text to the center


example:
[code][center]Hello World[/center][/code]

[center]Hello World[/center]

## Quoting
Quotes can be helpful in responses and when frencing third parties you have a number of ways to quote someone 

example
[code][quote]Hello World[/quote][/code]

becomes
[quote]Hello World[/quote]

You can also add the name of the person you wish to quote
[code][quote=Fred]Hello World[/quote][/code] or [code][quote="Fred"]Hello World[/quote][/code]

becomes
[quote=Fred]Hello World[/quote]
  
[quote="Fred"]Hello World[/quote]

### Code 
You can display code in various formats

example
`[code]Hello World[/code]`

becomes
[code]Hello World[/code]

You can specific a code language 

PHP example

```
[code=PHP]
<?= "Hello world\n" ?>
[/code]
```

becomes

[code=PHP]
<?= "Hello world\n" ?>
[/code]

### Linking
You can create links to various resources easily, this is useful when you wish to shorten a very long link

examples:

[code][url]https://google.com[/url][/code]
becomes
[url]https://google.com[/url]

[code][url=https://google.com]Google[/url][/code]

becomes
[url=https://google.com]Google[/url]

[code][url=https://google.com title=Go to Google.com]Google[/url][/code]

becomes
[url=https://google.com title=Go to Google.com]Google[/url]


### Images
Images can help make your post much easier on the eye
example
[code][img=https://discuss.flarum.org/assets/logo-2q2rcevl.png][/code]

becomes
[img=https://discuss.flarum.org/assets/logo-2q2rcevl.png]

[size=1][b]tip:[/b] you can just paste the images full url and it will also show the image, however you lose a little control over things like title, alt and size attributes[/size]

example
[code][img=https://discuss.flarum.org/assets/logo-2q2rcevl.png title="Flarum" alt="logo" height="30" width="30"][/code]

becomes 
[img=https://discuss.flarum.org/assets/logo-2q2rcevl.png title="Flarum" alt="logo" height="30" width="30"]

### Lists
Lists can be used to display data in a clean simple way

Example(s)
[b]Simple List[/b]
[code]
[list]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list][/code]

[b]ordered list[/b]
[code]
[list=1]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]
[/code]

becomes

[list=1]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]

[code]
[list=a]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]
[/code]

becomes

[list=a]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]

[code][list=A]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list][/code]

[list=A]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]

[code]
[list=i]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list][/code]

becomes
[list=i]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]

[code]
[list=I]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]
[/code]

becomes

[list=I]
[*]Hello
[*]World
[*]Ello
[*]Wurld
[/list]

Lists can also contain sub-items 

example:
[code][list]
[*]Hello
[list][*]World[/list]
[list][*]Ello
[list][*]Wurld[/list][/list]
[/list][/code]

becomes
[list]
[*]Hello
[list][*]World[/list]
[list][*]Ello
[list][*]Wurld[/list][/list]
[/list]

### Emails
You can format email address so they work as mailto address 

example:
[code][email]fred@example.com[/email][/code]

becomes
[email]fred@example.com[/email]

## Mix and Match
[b][color=red]Remember[/color][/b] that you can [I]mix and match[/I] and play around with the [size=9][u]formatting[/u][/size] as much as you wish, however over doing the formatting isn't always welcome so try to make your posts look good without turning them into a neon nightmare.

[center][url=https://discuss.flarum.org title="Flarum" height="auto" width="auto"][img=https://discuss.flarum.org/assets/logo-2q2rcevl.png alt=logo][/url][/center]