Fullscreen
Loading...
 
Wiki Help        
Print


This page shows examples of different features you can use on a page. In addition to typing in the code for these features directly, many are also accessible from the tool bars above the editor.

Basic Features

Text Format and Colour

Text that is __bold__, ''italicized'', ===underlined===, --struck through--. Sometimes it is useful to use -+typewriter text+- to indicate commands or things that the reader should type. If the typewriter text contains characters that confuse the Wiki, you can also use {MONO()}the MONO command{MONO}.
  Text that is bold, italicized, underlined, struck through. Sometimes it is useful to use typewriter text to indicate commands or things that the reader should type. If the typewriter text contains characters that confuse the Wiki, you can also use the MONO command.


Text that ~~#0a3:uses~~ ~~#FF0000:different~~ ~~#00F:colours~~. Colour should be used sparingly, and only when it is directly relevant to the content. Colours are specified using the standard hexadecimal HTML syntax: #RRGGBB or #RGB.
  Text that uses different colours. Colour should be used sparingly, and only when it is directly relevant to the content. Colours are specified using the standard hexadecimal HTML syntax: #RRGGBB or #RGB.

To center a block of text, start a line with two colons. Content will be centered until you end the block with two more colons. For example, :: centered text :: produces:
centered text


The Image  Wiki Link tool bar button will help you to find the right page. Type a few letters and it will list matching page names.

A link to ((another Wiki page|Release Notes)). The link text is optional: ((Release Notes)).
  A link to another Wiki page. The link text is optional: Release Notes.

An [http://cgjennings.ca|external link].
  An external link(external link).


Images

Images are inserted using the {img} command. To specify the image to show, you must either give a fileId or a src (source). If the image is part of the Wiki, you can specify it by its image id number; if it is located on another Web site, you use src to name the URL.

{img src=http://cgjennings.ca/images/eons.png align=center}
 
Image
{img fileId=35 align=center}
 
Image

Use the Image  Choose or upload images option to browse the Wiki images, or upload a new one. Options for the {img} command include:
thumb
show a thumbnail instead of the full image; set to y to open the full image as a new page, mouseover to pop up the full size image under the pointer
link
causes the image to link to the specified location
rel
if box, the fullsize image appears in an overlay box
width
specify the image width in pixels
height
specify the image height in pixels
max
specify the largest dimension, in pixels; the other dimension will be sized to maintain the aspect ratio
align
set to left, center, or right to align the image; leave this out if you want the image to appear inlined with the surrounding text


Page Organization

Headings and Subheadings

You create headings and subheadings by starting a new line with one to four exclamation marks (!). The number of exclamation marks indicates the level of the heading. One mark for a heading, two for a subheading and so on. If you put a number sign (#) after the exclamation marks, the headings will be numbered automatically (1, 1.1, 1.2, 2, and so on).

Note: The results of the heading example below are not shown because they would mess up the table of contents at the top of this page.

!Heading
This is the text that appears under "Heading". This is the first section.
!!Subheading
This is the text of the "Subheading" under the "Heading".
!Second Heading
This is the second section.
!!A Subheading
The first subheading under the second section.
!!!A Sub-subheading
A subsection of the subheading, if you are still with me.
!!!!A Sub-sub-heading
You shouldn't need to go deeper than this. If you do, consider splitting each heading into its own page.


Tables of Contents

Add the line {maketoc} to the top of a page to insert a clickable table of contents based on the headings and subheadings (see above):
{maketoc}

 


There is another kind of table of contents command you can use when you are dealing with a page that is part of a structure. A structure is used to create a "book" from a group of pages by organization them into chapters and sections. For example, the User Manual is a structure. When you are editing a page that is part of a structure, it is sometimes useful to make a list of the subpages of that page. For this purpose you can use the confusingly-named {toc} command.

Lists, Tables, and Boxes

Bullet, Number, and Definition Lists

Place each list item on a new line (press Enter to insert a line). For a bullet (unordered) list, start each line with an asterisk (*). For a numbered (ordered) list, start each line with a number sign (#). For a definition list, use the DL command and place a colon : on each line between the term and its definition.

*An __unordered__ list item
**A subitem
And some text
*Another item
. . . and more text . . .
*Item 3
. . . and some more text, to illustrate the line spacing.

  • An unordered list item
    • A subitem
And some text
  • Another item
. . . and more text . . .
  • Item 3
. . . and some more text, to illustrate the line spacing.

#An __ordered__ list item
##A subitem
+ And some text not breaking the numbering
#Another item
and more text (breaking the correlative numbering)
#Item 3
. . . and some more text, to illustrate the line spacing.

  1. An ordered list item
    1. A subitem

    And some text not breaking the numbering
  2. Another item
and more text (breaking the correlative numbering)
  1. Item 3
. . . and some more text, to illustrate the line spacing.

{DL()}
cat : a small furry mammal that meows and purrs
pumpkin : a kind of orange squash
{DL}

cat
a small furry mammal that meows and purrs
pumpkin
a kind of orange squash


Close
tipAlternative Definition List

As an alternative to {DL()} is to start the line with the indentation characters, semicolon and colon. The line ;Item : definition produces the following:
Item
definition

You can also leave out the "Item" part and just write ;: to create an indented line.


Tables

Tables start and end with two pipe characters (||). Within a table, starting a new line starts a new row. (To make a line break within a table cell, use %%%.) Within each row (line) a single pipe (|) divides one cell from the next.
A plain table:
||Row One, Column One|Row One, Column Two
Row Two, Column One|Row Two, Column Two||

A plain table:
Row One, Column OneRow One, Column Two
Row Two, Column OneRow Two, Column Two


To create a table with fancier formatting and more control, use {FANCYTABLE}:
{FANCYTABLE(head=head one~|~head two~|~head three)}cell one~|~cell two~|~cell three
r2 c1~|~ r2 c2~|~ r3 c2{FANCYTABLE}

head one head two head three
cell one cell two cell three
r2 c1 r2 c2 r3 c2


Note that for fancy tables, ~|~ is used to separate columns. The following options are available:
head
specify the titles to use in a header row for the table (use ~|~ to separate columns)
headaligns
for each column in the header row, specify its alignment with one of left, right, center, justify (use | to separate columns)
headvaligns
for each column in the header row, specify its vertical alignment with one of top, middle, bottom, baseline
colaligns
for each column in a normal row, specify its alignment with one of left, right, center, justify
colvaligns
for each column in a normal row, specify its vertical alignment with one of top, middle, bottom, baseline
colwidths
for each column, specify its with as either a percentage (20%) or a number of pixels (128px) (use | to separate columns)
sortable
if set to y, the table columns will be sortable
sortlist
to set the initial sort order, give the column number (starting from 0), then the direction (0=ascending, 1=descending) in square brackets (multiple sort keys may be given with a comma-separated list of these)


Starting a cell with a number of slashes (/) will cause that cell to span that many columns. To span multiple rows, use backslashes (\):
{FANCYTABLE(head=Col A~|~Col B~|~Col C,colaligns=center|center|center)}
//This spans two columns.~|~\\This spans%%%two rows.
c1r2~|~c2r2
c1r3~|~c2r3~|~c3r3
{FANCYTABLE}

Col A Col B Col C
This spans two columns. This spans
two rows.
c1r2 c2r2
c1r3 c2r3 c3r3



Boxes and Dividers

A titled divider can be created using -= Divider Title =-:
Divider Title

To place content in an inset box, start a line with a hat (^). A second hat closes the box:
^Think inside the box.^

Think inside the box.


Use the {QUOTE} command to format a quotation:
{QUOTE()}
Just what do you think you're doing, Dave?

--HAL, in 2001: A Space Odyssey (1968)
{QUOTE}

Quote:
Just what do you think you're doing, Dave?

--HAL, in 2001: A Space Odyssey (1968)


Tip and Warning Boxes

The {REMARKSBOX} command creates a variety of note, tip, and warning boxes:
{REMARKSBOX(type=warning,title=Hey!)}You have been warned.{REMARKSBOX}

Close
warningHey!
You have been warned.

Options for this command are:
type
the type of box; one of tip, note, comment, or warning
title
the title text for the box


Script Code Examples

To insert a script code example, use the {CODE} command. For syntax highlighting, include the option colors=se (for a Strange Eons script) or colors=java (for Java source code). To number the lines, include the option ln=1. The option wrap=1 allows lines of code to be wrapped.
{CODE(colors=javascript)}
var a = "World";
println("Hello, Other " + a + "!");
{CODE}

var a = "World";
println("Hello, Other " + a + "!");


To show the output produced by an example, use the {O()} command:
{O()}Hello, Other World!{O}

{O()}Hello, Other World!{O}

Contributors to this page: Chris Jennings .
Page last modified on Thursday 16 of February, 2012 04:55:04 EST by Chris Jennings.