Hello, peoples. I have put together a complete BBCode reference just for you. It's certainly not perfect, but with your help maybe it can be.
The original guide was fine, but it doesn't have all the tags. This one does (and if it doesn't, tell me if I missed any!).
To paraphrase the original guide, BBCode tags are alphanumeric words surrounded by square brackets, [ and ]. All tags have an opening variant that looks like [tag]. Most tags need to be closed with its corresponding closing tag, which looks like [/tag].
If your BBCode input is well-formed enough, it is converted to HTML, which is then rendered by the browser. Say you want this image embedded into the page. The img tag will create an image out of its content, the text in between the opening and the closing tag. A proper use of the img tag in BBCode will look like this: [img]/community/files/pictures2/picture-30519.gif[/img]. The resulting HTML will be <img src="/community/files/pictures2/picture-30519.gif">, resulting in this:
Many tags allow for parameters that change their output. Parameters follow the name in the opening tag, usually starting with an equals sign (=), but not always.
Below is all the BBCode tags that TEFc supports. Each tag will be introduced with its opening and closing variants. If the tag has no closing variant, the tag will be listed without one.
I apologize for the ugly design. I tried to keep the CSS light so that it doesn't confuse you (unless you're a coder, of course). There are some obvious differences, though, such as the yellow h3's.
Description: This tag indicates that the content enclosed is an abbreviation for whatever is specified in the parameter. If you hover over the abbreviation, you'll see what it stands for.
Format
BBCode input
Result
[abbr={title}]{text}[/abbr]
I am [abbr=Doctor]Dr.[/abbr] Hartley, master of BBCode.
Description: This tag indicates that the content enclosed is an acronym for whatever is specified in the parameter. If you hover over the acronym, you'll see what it stands for.
Format
BBCode input
Result
[acronym={title}]{text}[/acronym]
I am heading over to [acronym=The Endless Forest community]TEFc[/acronym] to do some intense coding.
I am heading over to TEFc to do some intense coding.
Description: This tag creates an anchor with the unique name specified by its parameter. You can jump to the anchor by using an a hyperlink pointing to that anchor. Note that there cannot be spaces in the parameter.
Format
BBCode input
Result
[anchor={name}]{text}[/anchor]
[anchor=example_anchor]I am an example anchor[/anchor].
[url=#example_anchor]Click me[/url] to get to the example anchor.
I'm so tired of being left aligned. I am thinking of centering myself, but I don't think I'm brave enough.
[center]I did it! I have been centered! I am so happy I could cry.[/center]
I'm so tired of being left aligned. I am thinking of centering myself, but I don't think I'm brave enough.
I did it! I have been centered! I am so happy I could cry.
Description: Escapes all HTML in the provided content. Doesn't do anything to BBCode. If the content contains line breaks, it will be processed as a code block. Otherwise, processes the content as inline code.
Format
BBCode input
Result
[code]{text}[/code]
My favorite JavaScript function is [code]document.querySelector()[/code].
My favorite JavaScript function is document.querySelector().
[code]{text}
{text}[/code]
To get the number of elements with the class name 'chocolate', do this:
[code]var elems = document.getElementsByClassName('chocolate');
console.log(elems.length);[/code]
To get the number of elements with the class name 'chocolate', do this:
var elems = document.getElementsByClassName('chocolate');
console.log(elems.length);
Description: Gives the enclosed content the color indicated by the parameter. Aside from the equals sign (=) in the beginning, the parameter must be a single word consisting of any combination of alphanumeric, hash (#), and underscore (_) characters.
Format
BBCode input
Result
[color={word}]{text}[/color]
What kind of color is [color=papayawhip]papaya whip[/color]?
What kind of color is papaya whip?
[color=#{hex}]{text}[/color]
The deer was not impressed. "[color=#0069FF]I have seen better shoes worn by an [em]anteater[/em][/color]," he remarked.
The deer was not impressed. "I have seen better shoes worn by an anteater," he remarked.
Description: Italicizes the content enclosed by the tag. Note that this does not decompose to the HTML <em> tag, so if you wish to semantically indicate emphasis, use <em> instead.
Description: Links to an email address linked to in the tag. If there is a parameter present, then that parameter will be the address and the enclosed content will be the text linking to that address via a mailto protocol. If there is no parameter, then the content will serve as both the email and the text linking to that email.
Format
BBCode input
Result
[email]{address}[/email]
You can contact ToT at [email]contact@tale-of-tales.com[/email].
You can contact ToT at .
[email={address}]{text}[/email]
If you send an email to [email=contact@tale-of-tales.com]Tale of Tales[/email], you might be able to to convince them to make a game about floppy cats.
If you send an email to , you might be able to to convince them to make a game about floppy cats.
Description: Embeds a flash object into the page. The parameters designate the dimensions of the object in pixels. The content will be a url to the source of a flash file.
Format
BBCode input
Result
[flash={pixels}x{pixels}]{url}[/flash]
This is what my pictogram looks like: [flash=150x150]http://tale-of-tales.com/TheEndlessForest/register/symbol2.swf?word=1Gchy[/flash]
Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Description: Embed an image into the page. The content indicates the source of the image, and parameters can be used to specify various details about that image. Using parameters, you can specify the width and height of the image, alternate text if the image doesn't load, or the alignment of the image. Note that certain browsers may not display the alternate text.
Description: This is actually an interesting tag. Creates a table of contents made of all the h1 through h6 tags. The table of contents at the top of this page is the result of using this tag. You can specify whether to use an ordered list or an unordered list to display the table of contents.
Description: Creates a list. The supplied parameter is a single character that specifies the type of list. Valid characters are: c, d, 1, i, I, a, and A. If no parameter is specified, c is applied by default. Depending on the character, the list will change the style of each list item. The character also affects whether the list is an ordered list or an unordered list. The following table displays the outcome of each option:
Character
List style
Tag
None provided
circle
ul
c
circle
ul
d
disc
ul
s
square
ul
1
decimal
ol
a
lower-alpha
ol
A
upper-alpha
ol
i
lower-roman
ol
I
upper-roman
ol
Note that TEFc replaces ul list item bullets with its own custom bullet, so you won't see their true output without altering the CSS.
Description: Prevents the BBCode inside this tag from being processed. Does nothing to the HTML. Also escapes the @ character, which can be used to escape email addresses. This tag doesn't seem to work on the color, font, or list tags.
Format
BBCode input
Result
[notag]{text}[/notag]
To italicize the word "chocolate", do [notag][i]chocolate[/i][/notag].
To italicize the word "chocolate", do [i]chocolate[/i].
Description: Indicates that the enclosed content is a quotation. Quotes can be nested. If params are provided, those params indicate the source of the quotation. The params can optionally include quotation marks, which will be removed. The params can also include BBCode and HTML.
Description: Creates a row of content in a table. This tag is the same as the row and tr tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Description: Creates a row of content in a table. This tag is the same as the r and tr tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Description: Changes the font size of the enclosed text. If the parameter supplied is below 6 or greater than 48, then the size is set to whichever value is closer.
Description: Creates non-breaking space that's supposed to prevent line breaks from being inserted. Also allows the writer to insert multiple spaces without them being condensed to one space character.
Description: Indicates that the enclosed text has strong importance. Note that this only changes the look of the text. If you wish to convey strong importance semantically, use the HTML version instead.
Description: Creates a row of content in a table. This tag is the same as the r and row tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Description: If a parameter is supplied, that parameter is the url and the enclosed content will hyperlink to that url. If no parameter is supplied then the enclosed content is both the url and the hyperlink to that url.
Format
BBCode input
Result
[url]{url}[/url]
This is the link to donate to The Endless Forest: [url]http://tale-of-tales.com/TheEndlessForest/donate.html[/url].
Description: Creates a link to a wikipedia page. The content must be the exact term matching an existing Wikipedia page, or it will direct the user to a nonexist page.
Format
BBCode input
Result
[wikipedia]{Wikipedia page}[/wikipedia]
Have you seen [wikipedia]The Endless Forest[/wikipedia]'s Wikipedia page?
In case you were wondering, my comment form module is mostly compatible with the BBCode tags here. Some of the tags have not been coded for, so they will not show up during previews. All tags will show up once submitted. If you know how a tag should turn out, and previewability is not a problem for you, then you can still use the forms as normal.
You can contribute by pointing out any mistakes I have made or by making any suggestions as to how I can make it better. Feel free to leave a comment, as feedback is appreciated.
I personally don't like using tables, so I am looking for a way to list each tag in a different format, but I don't know what since I'm not that creative. I would like if someone would suggest a better way to arrange the examples in this guide.
Yes, or at least it was. After making it, it seems that this guide is more of a supplemental reference than a replacement for the original. If you want to make this a complete replacement, you can most certainly help make that happen. But in the meantime, this is just going to be something different.
Great job, handy.
For improved readability, I'd do the table of contents horizontal and make tags' tables into separate divs with darker bg and vertical logic;
'merging' the format and input fields, writing the parameter/content notice into it;
omitting the 'html output' as your average user has no use for it.
These came to mind at the first look.
I don't want to overdo it on the CSS, because I think doing so will mislead the user. I left the table of contents the way it is since it's meant to showcase the [index] tag, and that's how it will look if you use it. I could make them expandable via click or condensed side by side, but, again, I don't want to mislead the user into thinking that using that tag will result in either of those options.
I find anything better than tables in most cases, so I guess I will do divs. I didn't want to at first because in my mind it would've looked the same as how it looks using tables. Then again, that's obviously a CSS issue and not an HTML issue. Plus, I'm bad at choosing colors since I'm obviously not a designer.
Now that you mention it, merging the format and input fields is a good idea, since the format field is kind of messy. I definitely need to make that more readable. Although I'm a little concerned about the tags that allow for a various and finite amount of parameters, such as left|right|center. I'd have to make an example for each instance, and that's unnecessary.
You're right: the average user has no use for the HTML. Those entries were remnants from when I wanted this to be an in-depth BBCode guide for advanced (for TEFc) coders (though now that I think of it that sounds like a contradiction). I guess that doesn't make sense since making this an in-depth guide would detract from the guide's utility as a reference. Plus, it's not robust since they are inserted using JavaScript, not from me copy/pasting each output.
Now that I've read it through, I see.
A screenshot could do as an example for [index].
I find that ToC has to be easy on the eye, as its primary function is to point the user around.
What fits a book, doesn't sit with the interactive website:
the anchors are navigated best within the span of a few rows vs. spread out as a long list.
Plus, tag names by themselves leave much to guesswork.
I suggest arranging them into groups by function [sth like text effects, content elements, table tags, referred elements].
GMSuerte wrote:
obviously not a designer
Might want to try a color picker. Changes colors realtime.
I know. I'm thinking that since the table of contents is too much, I'll just redo it without the index tag. Or, even easier, remove it. Either way I could have a smaller use of the index tag inside its example location, right where it should be. I guess it was a mistake to write the guide itself using BBCode.
I was considering arranging them by category, but for the table of contents it seemed more suitable to leave them all in alphabetical order since I used the index tag. I will reconsider it once I take care of the countless other details I have yet to address.
I did use a color picker. Shows you how awful I am at this.
Ooh. Tracking this~
Yup, bookmarking.
.
Sitting.
-Track-
Useful as always
Thankyouthankyouthankyouthank
You're a star
Y'all are too kind.
Nice.
Great job, handy. For
For improved readability, I'd do the table of contents horizontal and make tags' tables into separate divs with darker bg and vertical logic;
'merging' the format and input fields, writing the parameter/content notice into it;
omitting the 'html output' as your average user has no use for it.
These came to mind at the first look.
Hello there. I don't want to
I don't want to overdo it on the CSS, because I think doing so will mislead the user. I left the table of contents the way it is since it's meant to showcase the [index] tag, and that's how it will look if you use it. I could make them expandable via click or condensed side by side, but, again, I don't want to mislead the user into thinking that using that tag will result in either of those options.
I find anything better than tables in most cases, so I guess I will do divs. I didn't want to at first because in my mind it would've looked the same as how it looks using tables. Then again, that's obviously a CSS issue and not an HTML issue. Plus, I'm bad at choosing colors since I'm obviously not a designer.
Now that you mention it, merging the format and input fields is a good idea, since the format field is kind of messy. I definitely need to make that more readable. Although I'm a little concerned about the tags that allow for a various and finite amount of parameters, such as left|right|center. I'd have to make an example for each instance, and that's unnecessary.
You're right: the average user has no use for the HTML. Those entries were remnants from when I wanted this to be an in-depth BBCode guide for advanced (for TEFc) coders (though now that I think of it that sounds like a contradiction). I guess that doesn't make sense since making this an in-depth guide would detract from the guide's utility as a reference. Plus, it's not robust since they are inserted using JavaScript, not from me copy/pasting each output.
Tracking this.
Track.
What a good idea ! Tracking,
Avatar & signature by Shimmyshimmy. ♥
Now that I've read it
A screenshot could do as an example for [index].
I find that ToC has to be easy on the eye, as its primary function is to point the user around.
What fits a book, doesn't sit with the interactive website:
the anchors are navigated best within the span of a few rows vs. spread out as a long list.
Plus, tag names by themselves leave much to guesswork.
I suggest arranging them into groups by function [sth like text effects, content elements, table tags, referred elements].
Might want to try a color picker. Changes colors realtime.
I know. I'm thinking that
I was considering arranging them by category, but for the table of contents it seemed more suitable to leave them all in alphabetical order since I used the index tag. I will reconsider it once I take care of the countless other details I have yet to address.
I did use a color picker. Shows you how awful I am at this.
-Beeps you.-
♥
+
Savin for future reference
Thank you for doing this
Definitely need to track
Track.
*pulls out a couch* *sits and
Thanks y'all. And you're
O Trackin'.
Trackin'.
ty
tracking this because I keep