Introduction to BB Code 2.0 (aka KBB)

The BB-Code is a nice markup language.
It's easy to learn and understand. Also it's easy to implement and to extend in any programming language.

We've been using BB-Code for ages. We used it for internal (content management, translations, etc.) and external (comments posts, forums, blogs, etc.) rich-text in all our web services.
We improved the original BB-Code to be more user friendly and to allow us for more magic - and so we created BB Code 2.0.

Why ?

We wanted BB-code to be easier to use by typical user. To be less machine-like, less XML-ish, less HTML-ish, yet still easy to parse.

We use BB-Code in a lot more extensive manner comparing to what is allowed by original BB-Code design. We use it:

• for embedding advanced visual components in text - for example:
  
  • tip/help popups embedded into text
    
  • expand-on-click feature on blocks of text (show/hide details by click)
    
  • clickable mini-images in text - when clicked, the full-size image is displayed
    
  • embedding whole dynamic image galleries as piece of text
    
• for internal links smart generation.
  For example we use just tag [calc id=ElectricCost] to auto-generate full http anchor to Cost of electricity on calculla website, which internally is translated to proper label (resolving id to language dependency) and proper link (selecting proper domain, http-vs-https prefix and user-friendly resource name)
  
• for generating navigation menu from the text content (like the one used by this document)
  
• for any other automated view elements embeded text
  
• ... and a lot more - which will be covered later in that document
  

Initially our implementation of BB-Code evolved to internal standard. Of course, mega-lo-maniacally we call it Kemu-BB-Code or shortly KBB :)

Simple code, smart parsing

Forget about strict open-then-close logic. Typical user hates to follow that machine-like rule. BB-Code is not XML, so why bother ?

Examples of smart parsing:

• closing tag auto-detection example:
  instead of
  ⓘ Example usage:

  [theVerySpecialTag]the text[/theVerySpecialTag]

  we can write
  ⓘ Example usage:

  [theVerySpecialTag]the text[/]

• closing tag detection more advanced example:
  instead of this (easy to make a mistake)
  ⓘ Example usage:

  [b][i][u]the text[/u][/i][/b]

  we can write this
  ⓘ Example usage:

  [b][i][u]the text[/][/][/]

  and the smart parsing will find out automagically all the closing tags in proper order.
  
• auto html open-close:
  it is now pretty legal to write [b]bold[u]bold+underline[/b]underline[/] - the html is generated in completelly proper order (following HTML/XML rules)
  
• easy lists handling:
  no more open-close nightmare, instead of this:
  ⓘ Example usage:

  [ul][li]point 1[/li][li]point 2[/li][/ul]

  now just write this:
  ⓘ Example usage:

  [li]point 1[li]point 2[/]

  and you have a nice looking list. Of course html is generated in proper XML-like manner, and lists-inside-lists are still possible (covered later).
  
• disable a part of BB-Code:
  If you just want some part of you BB-Code disabled, invisible, hidden.
  For example:
  
  • you're going to finish a paragraph tommorow, you want to leave it in BBCode, but prevent it from rendering to html
    
  • you want to make invisible comment visible only for the author(s) of the text - this works like comments in typical source code
    
  You put [0] at start and [1] of text. Like this:
  
  ⓘ Example usage:

  this will be [0]in[1]visible part of a word.[0] And that sentence is invisible.[1]

  will be rendered as:
  
  ⓘ Example usage:

  this will be visible part of a word.

  So simply [0] means OFF and [1] means ON