List of BBCode tags and valid syntax spec, listed in alphabetical order.

<details>
<summary>
Table of Contents
</summary>

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Accordion `[accordion]{slide}` `[accordion][slide]`](#accordion-accordionslide-accordionslide)
- [Alignment](#alignment)
- [Anchor](#anchor)
- [Animation & Keyframe `[animation][keyframe]`](#animation--keyframe-animationkeyframe)
- [Background](#background)
- [Block](#block)
- [Blockquote](#blockquote)
- [Border](#border)
- [Centerblock](#centerblock)
- [Check](#check)
- [Class `[class]`](#class-class)
- [Code](#code)
- [Color](#color)
- [Comment `[comment]`](#comment-comment)
- [Div `[div]`](#div-div)
- [Font Awesome Icons `[fa]`](#font-awesome-icons-fa)
- [Headers & Sub-Headers `[h]` `[sh]`](#headers--sub-headers-h-sh)
- [Line Break & No Line Break `[br]` `[nobr]`](#line-break--no-line-break-br-nobr)
- [Script `[script]`](#script-script)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->
</details>

# Accordion `[accordion]{slide}` `[accordion][slide]`

Provides collapsable accordions with customizable text.

```bbcode
[accordion]
  {slide=name}content{/slide}
  {slide=name}content{/slide}
[/accordion]

[accordion]
  [slide=name]content[/slide]
  [slide=name]content[/slide]
[/accordion]
```

**Options - Accordion**

```bbcode
[accordion]
[accordion align="alignment" width="#%"]
[accordion=bright|bcenter|bleft|fright|fleft|##%]
```

- alignment options
  - `bright` - align the accordion to the right
  - `bcenter` - align the accordion to the center
  - `bleft` - align the accordion to the left
  - `fright` - float the accordion left
  - `fleft` - float the accordion right
- `width` - size the width of the accordion. Accepts either `%` percentages or `px` pixels.

single option with `|` splits are provided for legacy code.

**Options - Slide**

```bbcode
{slide=title|options}
[slide=title]
[slide title="title" left right center open style="CSS"]
```

- `title` - The title of the accordion slide
- `open` - Sets the accordion slide to be open by default
- `left` - align the title to the left of the slide
- `right` - align the title to the right of the slide
- `center` - align the title to the center of the slide
- `style` - add custom CSS to the title slide. **Not supported for `|` options**

Single option with `|` splits are provided for legacy code. Only works with `{slide}` syntax.

# Alignment

# Anchor

# Animation & Keyframe `[animation][keyframe]`

# Background

# Block

# Blockquote

# Border

# Centerblock

# Check

# Class `[class]`

Adds user defined CSS Classes to the post, to be used in tandem with [Div `[div]`](#div-div).

```bbcode
[class=name]content[/class]
[class name="className" state="psuedo-class" minWidth="" maxWidth=""]content[/class]
[class name="className" selector="selector"]content[/class]
```

**Options**

- `name` - The name of the CSS class. Must abide by standard CSS class name rules.
- `state` - This optionally applies one of a limited set of [psuedo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes). The list of valid psuedo-classes are:
  - `state="hover"` - Adds the CSS psuedo-class [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
  - `state="focus"` - Adds the CSS pseudo-class [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
  - `state="active"` - Adds the CSS pseudo-class [:active](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
  - `state="focus-within"` - Adds the CSS pseudo-class [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
  - `state="focus-visible"` - Adds the CSS pseudo-class [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
- `minWidth` - Adds a CSS media query [`@media (min-width:)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
- `maxWidth` - Adds a CSS media query [`@media (max-width:)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width)
- `selector` - Adds a custom selector to the end of the class name. For example `selector="::after"` will add `::after` to the class rule.

**Conversion to CSS / Using with divs**

This bbcode is a direct translation into a CSS class rule and is intended to be used alongside [Div `[div]`](#div-div). As such, the following bbcode will translate simply over.

```bbcode
[class=foobar]
  background-color: skyblue;
  color: gold;
  // CSS properties
[/class]

[class name=foobar minWidth="900px" maxWidth="1400px"]
  // CSS properties
[/class]

[class name=foobar state=hover]
  // CSS properties
[/class]

[div class="foobar"]
  content
[/div]
```

```html
<style>
  .foobar {
    background-color: skyblue;
    color: gold;
    // CSS properties
  }

  @media (min-width: 900px) and (max-width: 1400px) {
    .foobar {
      // CSS properties
    }
  }

  .foobar:hover {
    // CSS properties
  }
</style>

<div class="foobar">content</div>
```

**Using with CSS Animations**

Users are able to add CSS animations to the class. In the CSS rule for the `animation-name` or `animation`, The name of the animation must be prefixed with `{post_id}`. See [Animation & Keyframe `[animation][keyframe]`](#animation--keyframe-animationkeyframe) for more info.

See also:

- [Div `[div]`](#div-div)
- [Animation & Keyframe `[animation][keyframe]`](#animation--keyframe-animationkeyframe)
- [Script `[script]`](#script-script)

# Code

# Color

# Comment `[comment]`

Adds a hidden comment not visible to users.

```bbcode
[comment]i am a hidden comment[/comment]
```

# Div `[div]`

Provides an equivalent to the html `<div>` that users can style with either custom inline CSS styles or with custom CSS classes.

```bbcode
[div="style"]content[/div]
[div class="class names" style="style"]content[/div]
```

**Options**

- `style` - The inline CSS to apply to the div. Is the default for single option.
- `class` - Adds custom user defined class to the div. See [Class `[class]`](#class-class) for more information. Similar to standard HTML, multiple classes can be applied to the div via a whitespace separated list.

**As HTML**

This is just a direct translation to html.

```bbcode
[div class="foobar" style="color: red;"]content[/div]
```

```html
<div class="foobar" style="color: red;">content</div>
```

See also:

- [Class `[class]`](#class-class)
- [Script `[script]`](#script-script)

# Font Awesome Icons `[fa]`

Provides the usage of Font Awesome icons in posts. See [Font Awesome](https://fontawesome.com/).

```bbcode
[fa]fa-solid fa-pen[/fa]
[fa style="style" fa-transform="power transforms"]fa-solid fa-pen[/fa]
[fa primary-color="" secondary-color="" primary-opacity="" secondary-opacity="" rotate-angle=""]fa-duotone fa-icon[/fa]
```

**Options**

- `content` - standard FA icon names.
- `style` - Custom CSS styling to be applied. If needed, CSS properties can be applied here. See [FA Style Cheatsheet](https://docs.fontawesome.com/web/style/style-cheatsheet)
- `fa-transform` - Enables the usage of the FA Power Transforms. See [FA Power Transforms](https://docs.fontawesome.com/web/style/power-transform).
- `primary-color` - Applies the given color for Duotone icons
- `secondary-color` - Applies the given color for Duotone icons
- `primary-opacity` - Applies the given opacity to the primary color for Duotone icons
- `seconary-opacity` - Applies the given opacity to the secondary color for Duotone icons
- `rotate-angle` - Applies a custom rotation to the icon

# Headers & Sub-Headers `[h]` `[sh]`

Provides header and sub headers (mapped to h1 and h2 respectively). This is primarily a compatibility bbcode for legacy code. it is recommended to use markdown instead.

```bbcode
[h]Header[/h]
[sh]Sub-header[/sh]

[h1]header level 1[/h1]
[h2]header level 2[/h2]
[h3]header level 3[/h3]
[h4]header level 4[/h4]
[h5]header level 5[/h5]
[h6]header level 6[/h6]
```

# Line Break & No Line Break `[br]` `[nobr]`

Line breaks can be manually inserted via the `[br][/br]` tag. The natural line breaks can be ignored by wrapping a section in `[nobr][/nobr]`.

```bbcode
[nobr]
Hello world![br][/br]I am on a new line.

But this sentence is not on its own line.
[/nobr]
```

```
Hello world!
I am on a new line. But this sentence is not on its own line.
```

# Script `[script]`

- [x] Highlights
- [x] Justified Text
- [x] Blockquotes
- [x] Sub Script ⌨️
- [x] Super Script ⌨️
- [x] Google Font Library
- [x] Paragraph Indent
- [x] Bold, Italic, Underline, Strikethrough Ⓜ️
- [x] Color
- [x] Font Size
- [x] Left, Center, Right
- [x] Spoiler
- [x] Line Break
- [x] Inline Spoiler

Layout & Design

- [x] Dividers
- [x] Image Float
- [x] Fieldsets
- [x] Sides
- [x] Tabs
- [x] Accordions
- [x] ~~Tables~~ now using markdown tables
- [x] Center Block
- [x] Background
- [x] Border
- [x] Scroll Box
- [x] Anchors
- [ ] Rows & Columns

Media & Embeds

- [ ] Google Docs(PDF)
- [x] Height Restrict
- [x] Image
- [x] ~~Challonge - Add as an iframe supported site in settings instead.~~

Aesthetics

- [x] Print
- [x] Text Message
- [x] Blocks
- [x] Progress Bar
- [x] Sticky Note
- [x] Mail
- [x] Newspaper
- [x] Checks
- [ ] Font Awesome Icons
- [x] OOC