What is this page for?

This is my WikiStyle page where I'm trying out WikiStyle - the markup language which is used to edit a PeanutButterWiki, because there's no WYSIWYG editor.

It seems that PeanutButterWiki always treats the string "WikiStyle" as a hyperlink to a page called WikiStyle within that wiki, even though there isn't one there to start with. This link appears in various places around the wiki (including on the form used to edit pages) - it's almost as if they are encouraging everyone to write their own guides to writing WikiStyle! So here goes...

This page is heavily based on the style guide published at http://pbwikicentral.pbwiki.com/WikiStyle , because that's where I'm learning it from as I write this.

I started writing this page in the context of using the PeanutButterWiki WikiHosting service / environment to learn how to write wiki-markup. I didn't know at the time whether PeanutButterWiki 's idea of wiki-markup is the same as that of other wiki hosters or wiki engine deveopers.

Is there a W3C standard for this kind of thing? Apparently not, with different wiki engines using different markup styles. See the WikiMarkupStandard page on the meatball wiki for an idea of how different the various markup styles can be.

Character formatting

bold text - surround it with double-asterisks, e.g. **bold text**

italic text - surround it with double-apostrophes, e.g. ''italic text'' (that's two apostrophes, not a double-quote character)

underlined text - surround it with double underscores, e.g. __underlined text__

Some strikethrough text - surround it with space-hyphen and hyphen-space, e.g. Some -strikethrough text- This has the side-effect of putting a block-level box round the paragraph if the first space is the first character on the line.

Headings

To make a heading or sub-heading, start the line with exclamation marks - one for a top-level heading, two for a medium-sized one and three for a small one, e.g. !Headings or ! Headings. Using headings divides the page into sections so that a table of contents can be built.

Extra line breaks between headings and / or paragraphs seem to be ignored, except that a single line-break between paragraphs is counted as a line break, and a double-line-break is counted as a new paragraph.

Table of contents

To put a table of contents on your page, just include the string <toc> where you want the table of contents to appear. The table of contents is generated from the headings in the page, so if you haven't used any markup like !Big heading or !!!Little heading then your table of contents will be empty.

It's a good idea to use headings and subheadings to give structure to your document / page. I believe they can also be used as anchors - targets for hyperlinks, so that you can then create a hyperlink which links not just to your page, but to a specific section within your page. The automatic table of contents is a nice bonus.

Hyperlinks and WikiWords

Auto-hyperlinks

If you type the URL or web address of a web site or page / file on the web, it is automatically turned into a hyperlink pointing to that address.

e.g. http://en.wikipedia.org/ points to the English language version of Wikipedia, the free on-line encyclopedia which is also a wiki.

You need to include the http:// part of the address for it to work though - just typing www.stopesso.com won't work.

Beware of inadvertantly adding extra characters to your URL by not leaving a space between the end of it and and subsequent punctuation. If you're not careful, that comma or full stop at the end of your sentence which happened to end with a URL, could break the link by becoming part of the URL.

Pretty links

To show text which isn't a URL as a hyperlink, use square brackets and a vertical bar to set the text and the URL, e.g. [http://mywebsite.com|My web site] displays as My web site.

WikiWords

A WikiWord is defined at pbwikicentral like this:

"If you use two capital letters in a word with lowercase letters in between, pbwiki will automatically recognize the word as a link to a page."

I don't think this definition is strictly true, as proved by the following examples:

WoW displays as WoW - not a WikiWord

aBAB displays as aBaB - not a WikiWord

AbAb displays as AbAb - a WikiWord!

AbbA displays as Abba - not a WikiWord

I'd define a WikiWord as the result of concatenating two or more words into one, and capitalising the first letter of every word. So "wiki word" becomes WikiWord and "can I have a cup of tea" becomes CanIHaveACupOfTea.

When you write a phrase as a WikiWord, it is turned into a hyperlink to a page named after that WikiWord. If such a page doesn't exist, then the link is highlighted (often red, but this will depend on the style sheet used by the wiki) and will take you to a screen to create / edit the page. This is the normal way of creating new pages in a wiki.

To prevent a WikiWord from being displayed as a hyperlink, precede it with a tilde (~) character, e.g. ~WikiWord displays as WikiWord.

Uploading files and pictures

This advice is specific to PeanutButterWiki wikis. It's probably completely different for other wiki hosting options.

• Follow the "Files" link at the top of the page to the "Upload & Manage Forms" page.
• Hit one of the "Browse" buttons
• Browse to where your picture or file is on your PC's hard drive
• Repeat for other pictures or files, up to a maximum of five
• Hit the "Upload button"
• You are returned to the same form, which informs you that your file has been added to your wiki's file archive
• The file you have uploaded should be visible in the "Manage Uploaded Files" section of the form
• Right-click on the file's hyperlink in the "Manage Uploaded Files" section to copy its URL (web address) to the clipboard so that you can start linking or embedding your file into your wiki

Embedding pictures in pages

Once you've uploaded your picture to PeanutButterWiki, or found its URL somewhere else on the web, you can embed it in your page like this

A picture from this wiki

This image was downloaded from http://www.communitywiki.org/en/Oddwiki#4

See also http://www.communitywiki.org/en/MotherWiki

A picture from my PeanutButterWiki

Bulleted and numbered lists

• Bulleted list - begin the line with a * and a space, e.g. * Bulleted list
  • Bullet with indent - begin the line with a ** and a space, e.g. ** Bullet with indent
• bullet 2

1. Numbered list - begin the line with a # and a space, e.g. # Numbered list
1. Sub-item to numbered list item - begin the line with a ## and a space, e.g. ## Sub-item
2. number 2

Boxes, tables and lines

Inline boxed text

inline boxed text - surround it with vertical bars,

e.g. |inline boxed text|

No, I'm not deliberately trying to confuse you, I've just adopted a convention for this page of showing wiki-markup as inline boxed text. So it's going to cause some confusion when I try to demonstrate how to use wiki-markup to put some text in an inline box. The same would be true if I was writing a similar page, except in HTML, with examples, to explain how to write HTML.

Beware of attempting to use inline bodex text more than once in a paragraph, otherwise the whole paragraph might turn into a table!

Tables

e.g.

| or have a series | of vertical bars | marking the borders |
| between cells | to make a table |

Note that I used a VERBATIM tag to force this bit of wiki-markup to display exactly as entered, rather than the RAW tag which I've been able to use for most other examples of wiki-markup.

Block-level boxed text

The HR (horizontal rule) tag

-

Horizontal rule (HR tag) - hypen on a line on it's own (doesn't work!)

Or you could just include your own <hr> tag (does work, although that's embedded (X)HTML, not wiki-markup, and this page isn't about (X)HTML)

special pages

• RecentChanges shows you all of the changes recently made to the wiki.
• FindPage lets you search the wiki for a term or phrase.
• AllPages lists all of the pages in the wiki. Choosing "except revisions" at the top of AllPages reveals the earlier versions of the pages as well.
• The SideBar that appears in the upper right may be edited like any other page in the wiki.

-

Advanced

Best to ignore this section unless you're familiar with writing HTML or XHTML and understand the importance of well-formed, valid markup.

RAW & VERBATIM tags

If you want to display some text on your wiki page, which would normally be interpreted by the WikiEngine as wiki-markup, then there are two bits of markup which you can use to ensure that your text is displayed exactly as you entered it. The RAW (inline) and VERBATIM (block-level) tags are used as if they were XML or HTML tags. These are probably only useful if you're writing a page explaining how to write wiki-markup, but essential if that's what you're doing!

To display some inline text exactly as entered, surround it with a RAW tag.

To display a block of text (a whole paragraph or more) exactly as entered, surround it with a VERBATIM tag

I'm having difficulty using these two tags to escape each other so that I can show on this page how to use them. To save my sanity, if you want to know how to use them, just follow the "view wiki source" link at the bottom of this page to see the markup for this page - it's full of examples of how to use them.

Embedded (X)HTML and CSS

Introduction

If you want, you can exercise more control over the size, font, colour and other formatting of wiki pages, by embedding HTML or XHTML tags in your text - these should be preserved in the wiki page when it is viewed, and should be rendered as they would if you'd put them in any other HTML page.

See the page at pbwikicentral for some examples of using XHTML tags with in-line CSS to control size, colour, indentation, margins etc in a manner compatible with XHTML standards.

Floating table of contents

I'll provide one simple example of embedded XHTML which I think is quite a cool effect:

<div style="float:left; margin-right:10px;"><toc></div> displays a table of contents, but makes it "float" on the left-hand side of the page. Because the table of contents is quite narrow, I don't really want it taking up all that vertical space before the main page text starts. By making it float to the left, the main text of the page also starts at the top of the page, beside the table of contents, and then taking up the whole width of the page once the table of contents has finished. The margin-right part ensures that the body text doesn't butt up right against the table of contents.

Seperate content from presentation

However, this is going beyond wiki-markup and into full-blown HTML / XHTML / CSS territory. This gets into all sorts of technical complexity of exactly the sort which wiki-markup seems to be designed to avoid. Venture into this territory at your own risk! The best way to control the formatting of any web site, in my opinion, is using global style sheets. This ensures uniformity of formatting throughout the site, without needing to deliberately set the format of each paragraph. It also keeps the HTML code free of the sort of formatting clutter you get when using something like Word to create a web page, which means faster loading pages.

PeanutButterWiki style sheets

Unfortunately, the only control available to the owner of a free PeanutButterWiki over the global style sheets is by selecting one of three pre-designed styles. With a paid wiki, you also get a few more pre-designed styles, plus full control to edit your style sheets. In the mean time, just get used to thinking "big heading, smaller heading, body text", etc rather than in particular sizes, colours or fonts, and leave the formatting to the graphic designer :-)