The blog and portfolio of Dana Woodman

[b]bold text[/b]

Results in:

<strong>bold text</strong>

[i]italic text[/i]

Results in:

<em>italic text</em>

[s]strike-through text[/s]

Results in:

<strike>strike-through text</strike>

[u]underlined text[/u]

Results in:

<u>underlined text</u>

[size=30]30px text[/size]

Results in:

<span style="font-size:30px">30px text</span>

Depending on the implementation, font sizes could be based on pixels, points, or relative font sizes (e.g. percentage or em).

[color=green]green text[/color]

Results in:

<span style="color:green">green text</span>

Both HTML color names (e.g. “green”, “red”, “blue”, etc…) and hexadecimal color values (e.g. “#ffffff” or “ffffff”) with and without the pound sign (#) are generally supported. In some implementations you must remove the pound sign (#) from the color code.

[center]centered text[/center]

Results in:

<div style="text-align:center">centered text</div>

[quote]quoted text[/quote]

Results in:

<blockquote><p>quoted text</p></blockquote>

[quote="John Smith"]quoted text[/quote]

Results in:

<blockquote>
    <em>John Smith</em>
    <br />
    <p>quoted text</p>
</blockquote>

[url]http://www.google.com/[/url]

Results in:

<a href="http://google.com/">http://google.com/</a>

[url=http://google.com/]Google[/url]

Results in:

<a href="http://google.com/">Google</a>

[list]
    [*]List item[/*]
[/list]

Results in:

<ul>
    <li>List item</li>
</ul>

Some variations allow you to indicate what type of list it is by adding a parameter such as a number (e.g. [list=1][/list]) which will result in a ordered list or a letter (e.g. [list=a][/list]) which will result in an ordered list using letters instead of numbers (e.g. a, b, c, d, etc…).

[ul]
    [*]List item[/*]
[/ul]

Results in:

<ul>
    <li>List item</li>
    
</ul>

[ol]
    [*]List item[/*]
[/ol]

Results in:

<ol>
    <li>List item</li>
</ol>

[img]http://foo.com/img.gif[/img]

Results in:

<img src="http://foo.com/img.gif" />

[img=200x80]http://foo.com/img.gif[/img]

Results in:

<img src="http://foo.com/img.gif" width="200" height="80" />

The order is width by height. Size is in pixels.

[code]# code here...[/code]

Results in:

<pre># code here...</pre>

[code=css]body { background: #fff; }[/code]

This is sometimes implemented by using a syntax highlighting library (e.g. Pygments) and the resulting code is wrapped in span tags based on the language for styling with CSS.