BBCode

From Compsci.ca Wiki

Contents 1 What is BBCode? 2 Text Formatting 2.1 Bold Text 2.2 Underlining 2.3 Italics 2.4 Colour 2.5 Size 2.6 Centred Text 3 Coding 3.1 Basic Monospaced Code Tags 3.2 Syntax Highlighting 4 Quoting 4.1 Basic Quoting 4.2 Reference Quoting 5 Lists 5.1 Un-ordered Lists 5.1.1 Non-bulleted Lists 5.1.2 Bulleted Lists 5.2 Ordered Lists 6 URL Links 6.1 Basic Link 6.2 Named Link 7 Inserting Images 8 Combining Formatting Tags

What is BBCode?

BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition, you can disable BBCode on a per post basis via the posting form. BBCode itself is similar in style to HTML: tags are enclosed in square braces [ and ] rather than < and > and it offers greater control over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your posts is made much easier through a clickable interface above the message area on the posting form. Even with this you may find the following guide useful.

Please note that BBCode is not used in editing wiki pages. For information on how to edit wiki pages, please go here.

Text Formatting

BBCode includes tags to allow you to quickly change the basic style of your text.

Bold Text

To make a piece of text bold enclose it in [b][/b]. For example:

[b]Hello World[/b] becomes

Hello World

Underlining

To make a piece of text underlined, use [u][/u]. For example:

[u]Calvin and Hobbes[/u]

Calvin and Hobbes

Italics

To italicise text, use [i][/i]. For example:

I [i]like[/i] green [i]olives[/i] and ham, Sam I am.

I like green olives and ham, Sam I am.

Colour

Changing the colour of text is achieved by wrapping it in [color=][/color]. You can specify either a recognised colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, eg. #FFFFFF, #000000. For example, to create blue text you could use the following:

The colour [color=blue]blue[/color] is over used on the internet (and windows XP)

The colour blue is over used on the internet (and windows XP)

---Anyone know how to add colour to a wiki page?

[color=#00DEAD]This text is written in the colour 00DEAD[/color]

Size

Changing the text size is achieved in a similar way using [size=][/size]. This tag is dependent on the template you are using but the recommended format is a numerical value representing the text size in pixels, starting at 1 (so tiny you will not see it) through to 29 (very large). For example:

[size=9]small[/size]

small

[size=16]BIG[/size]

BIG

Centred Text

Text can be centred by wrapping it in [center][/center] tags. For example:

[center]Welcome to CompSci.ca[/center]

Coding

There are two ways of displaying code in a friendly manner that will not get you yelled at.

Basic Monospaced Code Tags

If you want to output a piece of code or in fact anything that requires a fixed width with a Courier-type font, you can enclose the text in [code][/code] tags. The following is some Ruby code, as you would type it into the reply box:

[code]
class << Foo
    def class_method
        puts "class method"
    end
    private :class_method
end
Foo.class_method    # --> Error!
[/code]

Syntax Highlighting

CompSci.ca also supports syntax highlighting. To use it, wrap your code in [syntax="language_name"][/syntax] tags. For example:

[syntax="java"]
public class HelloWorld
{
   public static void main(String[] args)
   {
      System.out.println("Hello world!");
   }
}
[/syntax]

Syntax highlighting will not work unless specific conditions are met.

• Do not start the string with an upper case letter. "java" is used, not "Java".
• Use letters only. "cpp" is used, not "c++"
• Not all languages are supported.
  • The supported languages include Java ("java"), C ("c"), C++ ("cpp"), Python ("python"), Pascal ("pascal"), Lisp ("lisp"), Bash ("bash"), PHP ("php"), VisualBASIC ("vb"), SQL ("sql"), css ("css"), ada ("ada"), are supported.
  • Most other languages are not supported, such as Turing, Ruby, O'Caml, and Haskell are not supported.
    • This means that there will be no syntax highlighting for these languages. However,the "language_name:" code box will appear. In future versions, support for these languages may be added, so it is good to use [syntax][/syntax] tags on these languages anyways.

Quoting

There are two ways you can quote text: with a reference or without.

Basic Quoting

To create a basic quote, wrap the quotation in [quote][/quote] tags. For example:

[quote]
God is man's way of glorifying his own importance.
[/quote]

Reference Quoting

To create a quotation and show who said it, wrap the quotation in [quote="name"][/quote] tags, where name represents the name of the person or thing that said the quotation. For example:

[quote="wtd"]
Don't reinvent the wheel if there's an existing library function to do it for you.
[/quote]

Lists

We can create ordered and un-ordered lists with BBCode.

Un-ordered Lists

There are two types of unordered lists.

Non-bulleted Lists

To create an un-ordered, non-bulleted list, wrap the contents in [list][/list] tags. This will indent all text within the list tags. For example:

[list]
Pirate
Ninja
Foo
[/list]

This produces the following each of the three words on their own line, indented. Cervantes has used this to indent sections of his tutorials. A good example of this can be seen in The Introduction to Turing tutorial.

Bulleted Lists

To create an un-ordered, bulleted list, wrap the contents in [list][/list] tags. A bullet is represented by [*]. For example:

[list]
[*]Pirate
[*]Ninja
[*]Foo
[/list]

Ordered Lists

There are two types of ordered lists. They are quite similar to the non-ordered, bulleted list, except instead of bullets, they use digits or letters. To create an ordered list, wrap the contents in either [list=1][/list] or [list=a][/list] tags. Each line is prefixed by a [*], as in the non-ordered, bulleted list. For example:

[list=1]
[*]Pirate
[*]Ninja
[*]Foo
[/list]

URL Links

BBCode allows us to insert links, or hypertext. There are two types of links.

Basic Link

To create a basic link, wrap the URL in [url][/url] tags. For example:

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

This produces the phpBB equivalent of http://www.google.ca

Named Link

To make text link to a webpage, wrap the text in [url="place complete URL here"][/url] tags. For example:

[url=http://maddox.xmission.com/]The Worst Page in the Universe[/url]

This produces the phpBB equivalent of The Worst Page in the Universe

Inserting Images

BBCode allows us to insert images into the forums. Go easy on this, however. Inserting large images will get you in trouble. If you want to insert a large image, you can make a thumbnail of it.

To insert an image, wrap the URL to the image in [img][/img] tags. For example:

[img]http://www.compsci.ca/wiki/images/7/7d/OniTony.jpg[/img]

This inserts the image into the forum, located at the left.

Combining Formatting Tags

BBCode tags may be combined to produce, for example, bold, italicized, and large text. To do this, place all the initial tags one after each other, followed by the text, followed by the closing tags. For example:

This text will [b][i][size=16]really[/size][/i][/b] stick out!

This text will really stick out!

[url=http://www.compsci.ca/v2/index.php]

[img]http://www.compsci.ca/v2/templates/Appalachia/images/logo_phpBB.gif[/img]

[/url]

This produces the CompSci.ca logo, and the image links to the CompSci.ca forum index.