A Little Introduction into BBcode

BBcode is a gutted version of HTML designed to facilitate some basic formatting and enrichment of your posts on the forum, but without compromising the security and presentation of the bulletin board that full HTML would facilitate. BBCode tags are similar in style to HTML tags, but they are enclosed in square braces [ and ] rather than < and >.

BBcode offers a set of paragraph and text enrichments listed below. The paragraph enrichments are:

  • [CODE] This is rendered within an indented frame and is WYSWIG with all characters being rendered in a mono-spaced font (Courier, ‘Courier New’, sans-serif; 11px)
  • [QUOTE] This is rendered within an indented frame and is WYSWIG with all characters being rendered in a proportional font (Arial, Helvetica, sans-serif; font-size: 11px;). Note that this tag also supports an optional argument which is the name of the person being quoted.
  • [LIST] An unordered list of bullets. The individual bullets are introduced with a [*] prefix.
  • [LIST=1] An ordered list of bullets, numbered 1,2,3… The individual bullets are introduced with a [*] prefix. Note that there is no way to start the list from other than 1.
  • [LIST=a] An ordered list of bullets, numbered a,b,c… The individual bullets are introduced with a [*] prefix. Note that there is no way to start the list from other than a.
  • [*] Bulleted List Item, where the bullet is determined by the containing list directive.
  • <cr> (Carriage Return) Used to start a new paragraph at the current list intent level.

Note that

  • All the above tags are case insensitive so [LiSt] works just as well as [LIST].
  • The [code], [quote] and the [list] variants are closed respectively by [/code], [/quote] and the [/list]
  • The above tags also generate a forced Newline, so <cr>[*] causes your lists to be double spaced, etc.. If you don’t want the second newline you need to flow the tags, — e.g. Options are [list] [*] Yes [*] No [/list] and from these …
  • These tags can also be nested to create hierarchical structures. The exception here is that as the content of a [code] pair is taken verbatim, so you cannot use cannot include a formatted list inside code using the [list] tag.

BBcode also provide a set of character enrichments tag to change the format of fonts. These must be pared with the corresponding closing tag.

  • [i] Italics
  • [b] bold
  • [u] underline
  • [color=X] Change font color as specified. The argument X can be any of the HTML recognised colors: red, green, blue, etc. or the 6 hexadecimal digit code, e.g. #000080.
  • [size=n] Change font size as specified. The argument n is the new font size in Pixels.

These token can be nested as required, but not that you must validly nest. So [i][b]Hello[/b][/i] renders as Hello, but [i][b]Hello[/i][/b] has indeterminate results. Also the previous format is stacked when a new tag is parsed and unstacked when the corresponding closing tag is parsed. Hence “This is [size=8]small [color=red]red[/color] text [/size] here” renders as “This is small red text here”.

Finally there are three special tags which map onto HTML anchor and image tags:

  • [url] Has three variants:
    [url=linkAddress]PageName[/url] so [url=http://www.oooforum.org/]OOoForum[/url] will render as OOoForum. Note that you must not use quotes around the URL.
  • Alternatively you can just specify the address [url]http://www.oooforum.org/[/url] or even just the bare URL reference http://www.oooforum.org/, though in this last case its a bit hit and miss if it the posting engine picks it up. And if you want to prevent the link being generated you need to play games: http:/[b][/b]/www.oooforum.org/
  • [email] this tag works the same way with the three variants

Lastly there is an [img] which uses the bare URL reference format. This can be used to insert an image or diagram into your post, but note that the image itself has to be externally hosted on a separate web service. You can also embed image tags in the URL tag name field thus:

  • [url=http://www.openoffice.org/][img]http://www.openoffice.org/branding/images/logonew.gif[/ img][/url]

Now this is all you need to generate BBcode. Unfortunately I know of no BBcode WYSIWYG editor. At the moment I do my BBcode in OOo Write and post process it with a set of Search/Replace macros. For example: Replace “.*” [regexp;bold] with “[b]” [regular]. I also have on my wish list to promote this to a proper template which handles all of the above rules. My aim here would be to type your post into one frame, using a BBCode specific Formatting Toolbar, with ability to snap the fomatted BBcode into another frame and clipboard for pasting direct into your post.

Leave a Reply