Skip to content

Latest commit

 

History

History
368 lines (298 loc) · 6.81 KB

specification.md

File metadata and controls

368 lines (298 loc) · 6.81 KB
Raw

Extended BBCode Parser - Specification

Preamble

The specification is located in the bbElements constant.
Check the "Custom tags" section in the main readme for more info on this structure.

The tags follow this format: [tag=val1 id2=val2], [/tag]
Where tag is the tag, val1 is the value of the default tag parameter, val2 is the value of the paramater named id2.

[Note about line returns]

[Note about the p that wraps everything]

Summary

Specification

The parameter line is ommited if none are supported by the tag.

Bold text

Tags:
b, bold

Output:
<span class="bb-bold">, </span>

Italic text

Tags:
i, italic

Output:
<span class="bb-italic">, </span>

Underlined text

Tags:
u, underline

Output:
<span class="bb-underline">, </span>

Strikethrough text

Tags:
s, strikethrough

Output:
<span class="bb-strikethrough">, </span>

Text size

Tag:
size

Parameter:

Keys Default Description
size, value Yes Size to apply to the text within the tag.

Output:
<span style="font-size: ${size};">, </span>

Text color

Tag:
color, colour

Parameter:

Keys Default Description
color, colour, value Yes Color to apply to the text within the tag.

Output:
<span style="color: ${color};">, </span>

Headers

Tag:
h1, h2, h3, h4, h5

Output:
<h2>, </h2>
<h3>, </h3>
<h4>, </h4>
<h5>, </h5>
<h6>, </h6>

Note:
The number is shifted by one to keep the <h1> intact for SEO.

Supertext

Tags:
sup, supertext

Output:
<sup>, </sup>

Subtext

Tags:
sub, subtext

Output:
<sub>, </sub>

Footnote

Tags:
footnote

Output:
<span class="bb-footnote">, </span>

Note:
This tag should be used for image footnotes, timestamps or any text that need to be subtle.

Link

Tags:
a, link

Parameter:

Keys Default Description
url, src Yes Color to apply to the text within the tag.

Output:
<a href="${url}">, </a>

Spoiler

Tags:
spoil, spoiler

Output:
<span class="bb-spoil">, </span>

Details

[detail]text[/detail]

<details>
    <summary>Click to expand</summary>
    <p>text</p>
</details>

[detail="title"]text[/detail]
[detail title="title"]text[/detail]

<detail>
    <summary>title</summary>
    <p>text</p>
</detail>
title

text

Tab

[tab]content[/tab]

<div class="bb-tab">content</div>

Tables

[table]
    [tr]
        [td]Row 1, Col 1[/td]
        [td]Row 1, Col 2[/td]
        [td]Row 1, Col 3[/td]
        [td r=2]Row 1, Col 4[/td]
    [/tr]
    [tr]
        [td c=2]Row 2, Col 1[/td]
        [td]Row 2, Col 3[/td]
    [/tr]
[/table]

<table>
    <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
        <td>Row 1, Col 3</td>
        <td rowspan="2">Row 1, Col 4</td>
    </tr>
    <tr>
        <td colspan="2">Row 2, Col 1</td>
        <td>Row 2, Col 3</td>
    </tr>
</table>

Lists

[list]
    [*]Entry A
    [*]Entry B
[/list]

<ul>
    <li>Entry A</li>
    <li>Entry B</li>
</ul>

[olist]
    [*]Entry 1
    [*]Entry 2
[/list]

<ol>
    <li>Entry 1</li>
    <li>Entry 2</li>
</ol>

IFrames and advanced elements

Progress bar

[progress=percent]title[/progress]

<!-- Not sure !!! -->
<div class="bb-progress">
    <p>title</p>
    <div>
        <div style="width: percent%"></div>
    </div>
</div>

Youtube video

[youtube]url[/youtube]
[yt]url[/yt]

<iframe width="560" height="315" src="url" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Steam game card

[steam]AppID[/steam]
[steam=AppID][/steam]

<iframe src="http://store.steampowered.com/widget/AppID" frameborder="0" width="646" height="190"></iframe>

Toggles

Line returns

Line returns are all replaced with a <br> tag, unless you use this tag to disable it:
[br-on]

After that, you can use the following tag to enable it again:
[br-off]

And if you want to manually add a <br> tag anywhere you can use:
[br]