StikiWeb Wiki - Help.WithMarkup

Welcome: Visitor (Login)      Page History: Help.WithMarkup



Brief description of the Markup Language

(For more/alternate information on the markup language see the Samples page.)

Entering Text

Paragraphs: A paragraph is a series of one or more lines of text starting in the first column (don't indent paragraphs) with no blanks lines. Paragraphs are separated by one or more blank lines.

Bold and Italic Text: To make text in a line appear in boldface put two consecutive underscore characters (__) before and after the part of the line to be bolded. (The string "Rich, __Bold__ Flavor" appears as "Rich, Bold flavor".) Similarly, two single-quote characters toggles italics, as in "Oh, ''that'' one." ( Oh, that one.) (To display a series of underscore characters or single quotes without interpritation, just preceed each character to display with a backslash character -- \_\_\_\_ appears as ____ and \'\'\'\' as ''''.)

Headings: Any line that has an exclamation mark in the first column will appear as a heading. The exclamation mark identifies the line as a heading and does not appear in the heading. Two exclamation marks gives a bigger heading and three gives a bigger heading yet.

Preformatted (source code): To put source listings in the page, or other text where you don't want it formatted, just put a space in column one. Lines with spaces in column one appear exactly as they are entered (except that the initial space is removed).

Non-Breaking Spaces: The sequence backslash-b ( \b ) will put a non-breaking space into your page and backslash-s followed by an number will insert that number of n-n breaking spaces. ( \s1 = 1 space, \s5 = five spaces, \s22 = 22 spaces) Non-breaking spaces are treated as parts of a word, not as a spaces. So two words separated by a non-breaking space will always be kept together when text is formattted since your browser will treat them as a single word.

Hypertext Links (Basics)

Links to other pages: To insert a link to another page in this site put the name of the page in brackets ( "[ ]" ). If the page name consists of several capitalized words with no spaces you can separate the words and omit the capitalization. ( [UserProfiles], [User Profiles], [User profiles] and [user profiles] all refer to the same page, UserProfiles.)

Links to child pages: The pages in this site are organized into a hierarchy based on the page name. If a page has a name with a dot between two of the words then the part of the name before the dot represents a parent page and the part after the dot the child page name. (This page is named "Help.WithMarkup" and it is a child of the Help page.) To create a link to a child page you can type the full name of the child (including the parent name and the dot) or, to link to a child of the page you are editing, you can replace the parent page name and the dot with an underscore. This page has a child page of its own named Example and the links -- Help.WithMarkup.Example (coded [asHelp.WithMarkup.Example] ) and Example (coded as [_Example])-- are both links to the child page.

Links to attachments: Pages on this site can have files attached to them in much the same way that email messages can have files attached. This page has a small image file attached to it named java.png. You can create a link to an attachment by appending a slash and the name of the attachment to the name of the page to which it is attached. To create a link to an attachment to the page you are editing you can use underscore-slash followed by the attachment name. The following links -- Help.WithMarkup/java.png (coded as [Help.WithMarkup/java.png]) and /java.png (coded as [_/java.png]) -- both refer to this image.

Links with display text: A link can display something different than the name of the page/attachment (or the address of the external page) to go to when the link is clicked. The alternate text is placed before the link target and is separated from the target by a vertical bar character ( "|" ). A link that displays "Click Here!" and goes to page "MyPage" when clicked would be coded as "[ClickHere!|MyPage]" .

Inline links: The contents of other pages and certain types of attachments can be inserted into the display of a page by creating an "inline" link to the page or attachment to be inserted. Inline links are indicated by putting an "at sign" ( "@" ) before the page/attachment name in the link. Inline links are most commonly used to include images (pictures) in a page. This page has an attachment named Help.WithMarkup/java.png. The link "[@Help.WithMarkup/java.png]" appears as


An alternate form for creating inline links to attachments to the page you are editing is to use the underscore form described above. Coded in this fashion the link to java.png would be "[_/java.png]" .

As well as including images in a page, inline links can be used to include other whole pages. The the link "[@_Example]" is displayed as the contents of this box:

This is an example of a child page.

Tables (Basics)

The easiest way to create a simple table is to enter it with each row in the table as a single line and each cell in the table introduced by a three-character mark indicating either a "header" cell ( "|!|" ) or a "data" cell ( "|||" ). The following markup ...

|||Moe|||Moses Howard (born Horwitz)
|||Shemp|||Sam Howard (born Horwitz)
|||Curly|||Jerome Howard (born Horwitz)
|||Larry|||Larry Fine (born Feinberg)
|||Joe|||Joe Besser
|||Curly-Joe|||Joe DeRita (born Wardell)

... produces this table:




Moses Howard (born Horwitz)


Sam Howard (born Horwitz)


Jerome Howard (born Horwitz)


Larry Fine (born Feinberg)


Joe Besser


Joe DeRita (born Wardell)

Hypertext Links (Advanced)

Tentative links: Because not all pages are accessible for all users it is sometimes useful to create a link that only appears if the user can access the target page/attachment. This is done by putting a question mark ( "?" ) before the name of the page/attachment in the link. The link coded as "[?MembersOnly]" will not appear to a user who cannot access the MembersOnly page.

If you have a vertical list of links (where links are separated by line-breaks) you can add a backslash-n ( "\n" ) to the end of the link's display text (if present) or to the link name if there is no display text. This will cause the separating line break to only appear if the link appears and avoid empty lines for omitted tentative links. The MembersOnly link would be coded as "[?MembersOnly\n]" or as "[Members Only Page\n|MembersOnly]".

Links that open in a new window: If the link target is preceeded by a caret ( "^" ) the link will open in a new window if clicked. The link Help!!! ( coded as "[Help!!!|^Help]") will open the Help page in a new window.

Links with clickable images: If a link should have a clickable image instead of text it can be coded with the name of an image as the display text preceeded by an asterisk ( "*" ). The following link, coded as "[*Help.WithMarkup/java.png|Help]", goes to the help page when clicked.

Links that use variables for targets: These links allow the targets of links, and (by inlining) the contents of pages, to depend on the contents of variables. This topic is probably too complex to discuss in this page. See Samples.TrafficLight for an example and explanation.

Tables (Advanced)

The table markup described above refers to an "autotable" -- a simplified table that is easy to enter but fairly limited. This section describes a more general markup for tables. The two forms of table can be mixed in the same page but cannot be nested. That is, a general table cannot appear inside an autotable and an autotable cannot appear inside a general table.

The table markup is a fairly thin gloss over the HTML table tags. In fact, the markup allows any legal HTML table tag attribute to be included.

Start a Table: The markup to start a new table is the two characters open-brace and vertical-bar ( "{|" ) in columns one and two of a line. HTML attributes for the table tag can follow the vertical bar but nothing else should be on the line. This is the only required element of the table markup. The translator will provide everything else if it is omitted. Even the "End a Table" will be assumed (at the end of the page.)

Note: Unlike an autotable, where the default is to have a border, a general table defaults to border=0 (no border). If you want a border you have to specify a border width.

End a Table: The markup to end a table should follow the last line of table content. It consists of the two characters vertical-bar and close-brace in columns one and two of the line. Nothing else should appear on the line.

A good example of the Start and End table markup is the section heading for this section of the page. (The pink-ish bar above the section) It is a table that runs the full width of the page and has a pink background color. It is coded as

{|width='100%' bgcolor='#FFCCCC'
__Tables__ (Advanced)

Start a Row: The markup to start a new row (or specify attributes for the first row) of a table consists of a veritcal bar in column one followed by one or more hyphens, followed in turn by optional attributes for the HTML row tag. The Start a Row tag is optional for the first row but can be included if the first row needs to have attributes specified. There is no markup for ending a row. The current row ends when the next one starts or the table ends.


{| border='1'
|- bgcolor='#CCFFCC'
not green

displays as


not green

Start a Header Cell: The markup to start a new header cell (usually displayed bolded and centered) is a vertical-bar followed by an exclamation point followed by another vertial-bar. The initial vertical-bar and exclamation-point must be in column one and two and the final vertical bar must be present but HTML attributes for the cell can appear between the exclamation point and the final vertical bar. Data to go in the cell can start after the final vertical bar but need not all appear on the line. Anything following, up to the next Table markup element (or the end of the page) will be included in the cell.

 |!| Heading 1
 |! bgcolor='blue' style='color:white' | White on Blue Heading

Start a Data Cell: The markup to start a new data cell is identical to the markup to start a new header cell except that it starts with two vertical-bars in columns one and two instead of vertical-bar exclamation-point.

 ||| Some Data
 || style='font-size:smaller' | Small Data

Note: This markup is optional for the first cell in a table (or a row) unless attributes need to be specified. Any content in a table that does not follow a specification for a header or data cell will be put in a data cell generated by default.

Compact Form: When the contents of the cells in a row are simple and brief the markup for several cells can appear on the same line (exactly like a row in an autotable). The initial vertical-bar in the markup for subsequent tags are treated as they appeared in column one in a new line.

 |||One   ||bgcolor='red'|Two   ||| Three

Note: Autotable rows can have cell attributes before the final vertical bar in each cell markup exactly like the compact form of a general table row.

   java.png (2043 bytes)