BB codes

  • [B], [I], [U], [S] - bold, Italic, Underline, Struck-through

    Basic text formatting for the wrapped text.
    Example:
    This is [B]bold[/B] text.
    This is [I]italic[/I] text.
    This is [U]underlined[/U] text.
    This is [S]struck-through[/S] text.
    Output:
    This is bold text.
    This is italic text.
    This is underlined text.
    This is struck-through text.

  • [COLOR=color], [BGCOLOR=color], [FONT=font], [SIZE=size] - Background color, Text color, Font, Size

    Advanced text formatting options for wrapped text.
    Example:
    This is [COLOR=red]red[/COLOR] and [COLOR=#0000cc]blue[/COLOR] text.
    This is [BGCOLOR=#FAA]red[/BGCOLOR] and [BGCOLOR=#AAF]blue[/BGCOLOR] highlighted text.
    This is [FONT=Courier New]Courier New[/FONT] text.
    This is [SIZE=1]small[/SIZE] and [SIZE=7]big[/SIZE] text.
    Output:
    This is red and blue text.
    This is [BGCOLOR=#FAA]red[/BGCOLOR] and [BGCOLOR=#AAF]blue[/BGCOLOR] highlighted text.
    This is [FONT=Courier New]Courier New[/FONT] text.
    This is small and big text.

  • [SUB], [SUP] - Subscript, Superscript

    Position wrapped text.
    Example:
    This is [SUB]subscript[/SUB] text.
    This is [SUP]superscript[/SUP] text.
    Output:
    This is [SUB]subscript[/SUB] text.
    This is superscript text.

  • [URL], [EMAIL] - Linking

    Creates a link using the wrapped text as the target.
    Example:
    [URL]https://www.example.com[/URL]
    [EMAIL][email protected][/EMAIL]
    Output:
    https://www.example.com
    [email protected]

  • [URL=link], [EMAIL=address] - Linking (Advanced)

    Links the wrapped text to the specified web page or email address.
    Example:
    [URL=https://www.example.com]Go to example.com[/URL]
    [[email protected]]Email me[/EMAIL]
    Output:
    Go to example.com
    Email me

  • [USER=ID] - Profile Linking

    Links to a user's profile. This is generally inserted automatically when mentioning a user.
    Example:
    [USER=1]Username[/USER]
    Output:
    Username

  • [IMG] - Image

    Display an image, using the wrapped text as the URL.
    Example:
    [IMG]https://storytellerscircle.com/data/assets/logo/2024LogoRevised.png[/IMG]
    Output:
    2024LogoRevised.png

  • [VIDEO] - Video

    Displays a video, using the wrapped text as the URL.
    Example:
    [VIDEO]https://storytellerscircle.com/styles/editor-manager/missing-video.mp3[/VIDEO]

    [VIDEO='width:300']https://storytellerscircle.com/styles/editor-manager/missing-video.mp3[/VIDEO]
    Output:


  • [AUDIO] - Audio

    Displays an audio player, using the wrapped text as URL.
    Example:
    [AUDIO]https://storytellerscircle.com/styles/editor-manager/missing-audio.mp3[/AUDIO]
    Output:

  • [MEDIA=site] - Embedded Media

    Embeds media from approved sites into your message. It is recommended that you use the media button in the editor tool bar.
    Approved sites: Apple Music, Dailymotion, Facebook, Flickr, Giphy, Google File, Google Spreadsheet, Imgur, Instagram, Pinterest, Reddit, SoundCloud, Spotify, TikTok, Tumblr, Twitch, X, Vimeo, YouTube
    Example:
    [MEDIA=youtube]oHg5SJYRHA0[/MEDIA]
    Output:
    An embedded YouTube player would appear here.

  • [LIST] - Lists

    Displays a bulleted or numbered list.
    Example:
    [LIST]
    [*]Bullet 1
    [*]Bullet 2
    [/LIST]
    [LIST=1]
    [*]Entry 1
    [*]Entry 2
    [/LIST]
    Output:
    • Bullet 1
    • Bullet 2
    1. Entry 1
    2. Entry 2

  • [LEFT], [RIGHT], [CENTER], [JUSTIFY] - Text alignment

    Changes the alignment of the wrapped text.
    Example:
    [LEFT]Left-aligned[/LEFT]
    [CENTER]Center-aligned[/CENTER]
    [RIGHT]Right-aligned[/RIGHT]
    [JUSTIFY]This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block.[/JUSTIFY]
    Output:
    Left-aligned​
    Center-aligned​
    Right-aligned​
    This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block. This is a justified text block.​

  • [QUOTE] - Quoted text

    Displays text that has been quoted from another source. You may also attribute the name of the source.
    Example:
    [QUOTE]Quoted text[/QUOTE]
    [QUOTE=A person]Something they said[/QUOTE]
    Output:
    Quoted text
    Click to expand...
    A person said:
    Something they said
    Click to expand...

  • [SPOILER] - Text containing spoilers

    Hides text that may contain spoilers so that it must be clicked by the viewer to be seen.
    Example:
    [SPOILER]Simple spoiler[/SPOILER]
    [SPOILER=Spoiler Title]Spoiler with a title[/SPOILER]
    Output:
    Simple spoiler
    Spoiler with a title

  • [ISPOILER] - Inline text containing spoilers

    Hides text that may contain spoilers so that it must be clicked by the viewer to be seen.
    Example:
    You have to click the following [ISPOILER]word[/ISPOILER] to see the content.
    Output:
    You have to click the following word to see the content.

  • [CODE] - Programming code display

    Displays text in one of several programming languages, highlighting the syntax where possible.
    Example:
    General code:
    [CODE]General
    code[/CODE]

    Rich code:
    [CODE=rich][COLOR=red]Rich[/COLOR]
    code[/CODE]

    PHP code:
    [CODE=php]echo $hello . ' world';[/CODE]

    JS code:
    [CODE=javascript]var hello = 'world';[/CODE]
    Output:
    General code:
    Code: 
    General
code

    Rich code:
    Rich (BB code): 
    Rich
code

    PHP code:
    PHP: 
    echo $hello . ' world';

    JS code:
    JavaScript: 
    var hello = 'world';

  • [ICODE] - Inline programming code display

    Allows you to display code inline among normal post content. Syntax will not be highlighted.
    Example:
    Inline code sections [ICODE]are a convenient way[/ICODE] of displaying code inline.

    Rich formatting within inline code sections [ICODE=rich]is [COLOR=red]also[/COLOR] [U]supported[/U][/ICODE].
    Output:
    Inline code sections are a convenient way of displaying code inline.

    Rich formatting within inline code sections is also supported.

  • [TABLE] - Tables

    Special markup to display tables in your content.
    Example:
    [TABLE]
    [TR]
    [TH]Header 1[/TH]
    [TH]Header 2[/TH]
    [/TR]
    [TR]
    [TD]Content 1[/TD]
    [TD]Content 2[/TD]
    [/TR]
    [/TABLE]
    Output:
    Header 1Header 2
    Content 1Content 2

  • [TABLE=class] - Tables (Advanced)

    Advanced table styling.
    Example:
    Option adds additional styling.
    [TABLE=noborder]
    [TR]
    [TH]Header 1[/TH]
    [TH]Header 2[/TH]
    [/TR]
    [TR]
    [TD]Content 1[/TD]
    [TD]Content 2[/TD]
    [/TR]
    [/TABLE]

    Multiple styles can be combined.
    [TABLE=collapse,right,nobackground]
    [TR]
    [TH]Header 1[/TH]
    [TH]Header 2[/TH]
    [/TR]
    [TR]
    [TD]Content 1[/TD]
    [TD]Content 2[/TD]
    [/TR]
    [/TABLE]

    [TABLE=collapse,center,alternate]
    [TR]
    [TH]Header 1[/TH]
    [TH]Header 2[/TH]
    [/TR]
    [TR]
    [TD]Content 1[/TD]
    [TD]Content 2[/TD]
    [/TR]
    [TR]
    [TD]Content 1[/TD]
    [TD]Content 2[/TD]
    [/TR]
    [/TABLE]
    Output:
    Option adds additional styling.
    Header 1Header 2
    Content 1Content 2

    Multiple styles can be combined.
    Header 1Header 2
    Content 1Content 2

    Header 1Header 2
    Content 1Content 2
    Content 1Content 2

  • [HEADING=level] - Headings levels 1 to 3

    Marks text as a structured heading to facilitate machine readability.
    Example:
    [HEADING=1]Major heading[/HEADING]
    This text comes under a major heading, used to separate the primary sections of an article.

    [HEADING=2]Minor heading[/HEADING]
    When you need to subdivide the primary sections of an article, use a level 2 minor heading.

    [HEADING=3]Subheading[/HEADING]
    If you require additional subdivision, you may drop to level 3.
    Output:

    Major heading​

    This text comes under a major heading, used to separate the primary sections of an article.

    Minor heading​

    When you need to subdivide the primary sections of an article, use a level 2 minor heading.

    Subheading​

    If you require additional subdivision, you may drop to level 3.

  • [INDENT] - Text indent

    Indents the wrapped text. This can be nested for larger indentings.
    Example:
    Regular text
    [INDENT]Indented text[/INDENT]
    [INDENT=2]More indented[/INDENT]
    Output:
    Regular text
    Indented text​
    More indented​

  • [PLAIN] - Plain text

    Disables BB code translation on the wrapped text.
    Example:
    [PLAIN]This is not [B]bold[/B] text.[/PLAIN]
    Output:
    This is not [B]bold[/B] text.

  • [ATTACH] - Attachment insertion

    Inserts an attachment at the specified point. If the attachment is an image, a thumbnail or full size version will be inserted. This will generally be inserted by clicking the appropriate button.
    Example:
    Thumbnail: [ATTACH]123[/ATTACH]
    Full size: [ATTACH=full]123[/ATTACH]
    Output:
    The contents of the attachments would appear here.

  • [COLORBOX=option] - Colorbox

    Simple replacement bbCode that converts entered RGB color values as a visible small circle colored with the entered background color, to visually represent a color within a post without coloring any other elements.
    Example:
    [colorbox=42,40,41]ANY.CHARACTER[/colorbox]
    Output:
    Pretend Character Sheet
    Name: Example Maestro
    |||||||||||||||||||||||||||||||||||||||||
    Hair: Type 2A, Color:
    Eye Color:

  • [FOLD] - Fold

    Fold text within a container out of view, with optional multiple headings and accordion toggle behavior.
    Example:
    [fold]
    [hd=First Heading]Content for section 1.[/hd]
    [hd]Content for unlabeled 2nd section.[/hd]
    [hd=Some Other Heading]Content for labeled 3rd section.[/hd]
    [/fold]
    Output:

    ▶ First Heading
    Content for section 1.

    ▶
    Content for unlabeled 2nd section.

    ▶ Some Other Heading
    Content for labeled 3rd section.

  • [GALLERY=option] - Gallery embed

    BB code for displaying gallery media items and albums.
    Example:
    [GALLERY=media, X]Gallery BB Code[/GALLERY]
    Output:
    [GALLERY=media, X]Gallery BB Code[/GALLERY]

  • [KODE] - Pseudo Code

    Pseudo code block without rendering limitations needed for real syntax highlights.
    Example:
    [kode]

    [plain]>[/plain]Initilizating example.exe

    [plain]>[/plain]executing...99%

    [OPACITY=0.1]>//.false_code_box_params loaded[/OPACITY]

    [COLOR=rgb(251, 160, 38)]>//Edit Freedom Achieved: I am not a code block, I am 'Kode', I just pretend.[/COLOR]

    [/kode]
    Output:


    >Initilizating example.exe

    >executing...99%

    >//.false_code_box_params loaded

    >//Edit Freedom Achieved: I am not a code block, I am 'Kode', I just pretend.

  • [OPACITY=option] - Opacity

    Changes the text's apparent opacity via changing the alpha channel on rgba color declaration. This version does not support text colors.
    Example:
    [opacity=0.5]This text is 50% opaque and 50% transparent[/opacity]
    Output:
    This text is 50% opaque and 50% transparent

  • [RECEIVED] - Received Message Bubble

    Simulated Received Text Message in Bubble
    Example:
    [received]Did you get my previous message about STC?[/received]
    [received]You can even [I]nestle formatting[/i] within![/received]
    Output:
    Did you get my previous message about STC?

    You can even nestle formatting within!

  • [SENT] - Sent Message Bubble

    Simulated Sent Text Message in Bubble
    Example:
    [sent]I did get your previous message about STC![/sent]
    [sent] It's pretty cool! Even smilies :) [/sent]
    Output:
    I did get your previous message about STC!

    It's pretty cool! Even smilies :)

  • [TOOLTIP=option] - Tooltip

    Displays a tooltip when hovering over text. Tooltip does not support nesting tags "inside" but will render text options for both text and hover text if applied to the whole tag.
    Example:
    [tooltip=This is the tooltip text.]Hover over this text.[/tooltip]
    Output:
    Hover over this text.
    This is the tooltip text.
Back
Top