inline text: text only content (inline-level tag)
lorem ipsum: any content (block-level tag)
❗ Supports both inline and block level. However it will only use div. Everything else is the same.
[imageFloat=left]insert image tag here[/imageFloat]
[imageFloat=right]insert image tag here[/imageFloat]
<div class="float-left">insert image tag here</div>
<div class="float-right">insert image tag here</div>[highlight]inline text[/highlight]
<span class="bbcodeHighlight">inline text</span>[border=css value]lorem ipsum[/border]
<div class="bbcode-border" style="border: css value">lorem ipsum</div>[bg=css value]lorem ipsum[/bg]
<div class="bbcode-background" style="background-color: css value"></div>[fieldset=title]lorem ipsum[/fieldset]
<fieldset class="bbcode-fieldset">
<legend>title</legend>
<span>lorem ipsum</span>
</fieldset>[side=left]lorem ipsum[/side]
[side=right]lorem ipsum[/side]
<div class="bbcode-side-left">lorem ipsum</div>
<div class="bbcode-side-right">lorem ipsum</div>❗ must manually put in px
[scroll=height value in px]lorem ipsum[/scroll]
<div
style="max-width: 100%; padding: 5px; overflow:auto; border: 1px solid; height:height value in px;"
>
lorem ipsum
</div>[nobr]lorem ipsum[/nobr]
[br][/br]
<!--replaces all line breaks with spaces in lorem ipsum-->
<br data-bbcode-nobr-ignore="true" />[divide]inline text[/divide]
[divide=dotted]inline text[/divide]
[divide=thick]inline text[/divide]
[divide=dotted-thick]inline text[/divide]
<span class="bbcode-horizontal-rule">inline text</span>
<span class="bbcode-horizontal-rule-dotted">inline text</span>
<span class="bbcode-horizontal-rule-thick">inline text</span>
<span class="bbcode-horizontal-rule-dotted-thick">inline text</span>VALUE: 1-8 or span1-8
[row]
[column=VALUE]
lorem ipsum
[/column]
[/row]
<div class="bbcode-row">
<div class="bbcode-column column-width-spanVALUE">lorem ipsum</div>
</div>[inlineSpoiler]inline text[/inlineSpoiler]
<span class="inlineSpoiler">inline text</span>[justify]lorem ipsum[/justify]
<div class="bbcode-justify">lorem ipsum</div>[blockquote=author]lorem ipsum[/blockquote]
<div class="bbcode-blockquote">
<div class="bbcode-blockquote-left"></div>
<div class="bbcode-blockquote-content">
lorem ipsum
<div class="bbcode-blockquote-speaker">author</div>
</div>
<div class="bbcode-blockquote-right"></div>
</div>[pindent]inline text[/pindent]
<span style="display: inline-block; text-indent: 2.5em">inline text</span>[print]lorem ipsum[/print]
[print=line]lorem ipsum[/print]
[print=graph]lorem ipsum[/print]
[print=parchment]lorem ipsum[/print]
<div class="bbcode-print">lorem ipsum</div>
<div class="bbcode-print-line">lorem ipsum</div>
<div class="bbcode-print-graph">lorem ipsum</div>
<div class="bbcode-print-parchment">lorem ipsum</div>[textmessage=Recipient]
[message=them]message from Recipient[/message]
[message=me]message from sender[/message]
[/textmessage]
<div class="bbcode-textmessage">
<div class="bbcode-textmessage-name">Recipient</div>
<div class="bbcode-textmessage-overflow">
<div class="bbcode-textmessage-content">
<div class="bbcode-message-them">message from Recipient</div>
<div class="bbcode-message-me">message from sender</div>
</div>
</div>
</div>Built in fonts:
arial
book antiqua
courier new
georgia
tahoma
times new roman
trebuchet ms
verdana
Valid fonts also include Google Fonts.
❗ Supports both inline and block level. It will use span or div depending on the context. Everything else is the same.
[font=built in]this is a built in font[/font]
[font=Google Font]this is a google font[/font]
<div style="font-family: built in, Helvetica, Arial, sans-serif;">this is a built in font</div>
<div
style="font-family: Google Font, Helvetica, Arial, sans-serif;"
data-bbcode-gfont="Google+Font"
>
this is a google font
</div>
<link rel=stylesheet type=text/css href="https://fonts.googleapis.com/css2?family=Google+Font"
data-rendered-gfont="Google+Font">Multi Options
❗ color and size are both optional. Only family or name is required.
family and name do the same thing.
valid size: Must match [TAG-031: Size] constraints.
VALUE: font-weight. Either a numeric within 1-1000 inclusive, or a phrase as below:
thin
extra-light
light
regular
medium
semi-bold
bold
extra-bold
black
The italics option can also be just italic, as to prevent confusion.
[font name="font"]multi[/font]
[font family="font"]multi[/font]
[font name="font" color="valid css color" size="valid size"]optional[/font]
[font family="gfont" weight=VALUE italics=true]font styles[/font]
<div style="font-family: Font, Helvetica, Arial, sans-serif;">multi</div>
<div
style="font-family: Font, Helvetica, Arial, sans-serif; font-size: valid size; color: valid css color;"
>
optional
</div>
<div
style="font-family: gfont, Helvertica, Arial, sans-serif; font-style: italic; font-weight: VALUE;"
data-bbcode-gfont="gfont:ital,wght@1,VALUE"
>
font styles
</div>
<link rel=stylesheet type=text/css
href="https://fonts.googleapis.com/css2?family=gfont:ital@1,wght@VALUE"
data-rendered-gfont="gfont:ital,wght@1,VALUE">Option
dice
dice10
setting
warning
storyteller
announcement
important
question
encounter
information
character
treasure
[block=Option]lorem ipsum[/block]
<div class="bbcode-block" data-bbcode-block="Option">
<div class="bbcode-block-icon"></div>
<div class="bbcode-block-content">lorem ipsum</div>
</div>value: percentage
[progress=value]inline text[/progress]
[thinprogress=value]inline text[/thinprogress]
<div class="bbcode-progress">
<div class="bbcode-progress-text">inline text</div>
<div class="bbcode-progress-bar" style="width: calc(value% - 6px);"></div>
<div class="bbcode-progress-bar-other"></div>
</div>
<div class="bbcode-progress-thin">
<div class="bbcode-progress-text">inline text</div>
<div class="bbcode-progress-bar" style="width: value%;"></div>
<div class="bbcode-progress-bar-other"></div>
</div>[note]lorem ipsum[/note]
<div class="bbcode-note">
<div class="bbcode-note-tape"></div>
<div class="bbcode-note-content">
lorem ipsum
<div class="bbcode-note-footer"></div>
</div>
</div>[mail type=send person=Name subject="Subject Title"]
lorem ipsum
[/mail]
[mail type=receive person=Name subject="Subject Title"]
lorem ipsum
[/mail]
<div class="bbcode-email" data-bbcode-email="send">
<div class="bbcode-email-top"></div>
<div class="bbcode-email-address">Name</div>
<div class="bbcode-email-subject">Subject Title</div>
<div class="bbcode-email-content">lorem ipsum</div>
<div class="bbcode-email-footer">
<div class="bbcode-email-button"></div>
</div>
</div>
<div class="bbcode-email" data-bbcode-email="receive">
<div class="bbcode-email-top"></div>
<div class="bbcode-email-address">Name</div>
<div class="bbcode-email-subject">Subject Title</div>
<div class="bbcode-email-content">lorem ipsum</div>
<div class="bbcode-email-footer">
<div class="bbcode-email-button"></div>
</div>
</div>[newspaper]lorem ipsum[/newspaper]
<div class="bbcode-newspaper">lorem ipsum</div>[check=dot]dotted[/check]
[check=check]checked[/check]
[check=cross]crossed[/check]
<div class="bbcode-check-dot">dotted</div>
<div class="bbcode-check-check">checked</div>
<div class="bbcode-check-cross">crossed</div>[accordion]
[slide=name]
lorem ipsum
[/slide]
[/accordion]
<div class="bbcode-accordion">
<button class="bbcode-slide-title" onclick="toggleBBCodeSlide(event)">name</button>
<div class="bbcode-slide-content">lorem ipsum</div>
</div>[ooc]text only[/ooc]
<div class="bbcode-ooc">
<div>OOC</div>
text only
</div>[tabs]
[tab=title]
lorem ipsum
[/tab]
[/tabs]
<div class="bbcode-tab">
<button class="bbcode-tab-links">title</button>
<div class="bbcode-tab-content">lorem ipsum</div>
</div>[center]
lorem ipsum
[/center]
<div class="bbcode-content-center">lorem ipsum</div>[left]
lorem ipsum
[/left]
<div class="bbcode-content-left">lorem ipsum</div>[right]
lorem ipsum
[/right]
<div class="bbcode-content-right">lorem ipsum</div>❗ Supports both inline and block level
[color=valid css value]inline text[/color]
[color=valid css value]
lorem ipsum
[/color]
<span style="color: valid css value">inline text</span>
<div style="color: valid css value">lorem ipsum</div>❗ Supports both inline and block level for all options
[size=#]unitless size range from 1 to 7[/size]
[size=#px]size in px, range from 8px to 36px[/size]
[size=#rem]size in rem, range from 0.2rem to 3rem[/size]
<div class="bbcode-size-#">unitless size range from 1 to 7</div>
<span class="bbcode-size-#">unitless size range from 1 to 7</span>
<span style="font-size: #px">size in px, range from 8px to 36px</span>
<span style="font-size: #rem">size in rem, range from 0.2rem to 3rem</span>[spoiler]
lorem ipsum
[/spoiler]
[spoiler=title]
lorem ipsum
[/spoiler]
<div class="bbcode-spoiler">
<button class="bbcode-spoiler-button">Spoiler</button>
<div class="bbcode-spoiler-content">lorem ipsum</div>
</div>
<div class="bbcode-spoiler">
<button class="bbcode-spoiler-button">Spoiler: title</button>
<div class="bbcode-spoiler-content">lorem ipsum</div>
</div>If icon style is not given, defaults to far
[fa]fa-icon fa-class fa-primary-color{color code} fa-primary-opacity{range from 0 to 1} fa-secondary-color{color code} fa-secondary-opacity{range from 0 to 1}[/fa]
<svg
class="fa-class"
style="--fa-primary-color: color code; --fa-primary-opacity: range from 0 to 1; --fa-secondary-color: color code; --fa-secondary-opacity: range from 0 to 1"
>
<use href="#icon reference"></use>
</svg>[a=TAG]inline text[/a]
[goto=TAG]inline text[/goto]
<a id="user-anchor-TAG">inline text</a>
<a href="#user-anchor-TAG">inline text</a>[heightrestrict=#]img[/heightrestrict]
<div class="bbcode-height-restrict" style="height: #px;">img</div>Max value is 5
[indent]text[/indent]
[indent=3]text[/indent]
<div style="margin-left: 20px">text</div>
<div style="margin-left: 60px">text</div>