Wikka Formatting Guide
Note: Anything between 2 sets of double-quotes is not formatted.
Once you have read through this, test your formatting skills in the SandBox.
1. Text Formatting
**I'm bold**
I'm bold
//I'm italic text!//
I'm italic text!
And I'm __underlined__!
And I'm underlined!
##monospace text##
monospace text
''highlight text'' (using 2 single-quotes)
highlight text
++Strike through text++
Strike through text
Press #%ANY KEY#%
Press ANY KEY
@@Center text@@
Center text
2. Headers
Use between five = (for the biggest header) and two = (for the smallest header) on both sides of a text to render it as a header.
====== Really big header ======
===== Rather big header =====
==== Medium header ====
=== Not-so-big header ===
== Smallish header ==
3. Horizontal separator
----
4. Forced line break
---
This line to break --- right here
This line to break
right here
right here
5. Lists and indents
You can indent text using a ~, a tab or 4 spaces (which will auto-convert into a tab).
~This text is indented
~~This text is double-indented
This text is also indented
This text is also double indented
This text is indented
This text is double-indented
This text is also indented
This text is also double indented
To create bulleted/ordered lists, use the following markup (you can always use 4 spaces instead of a ~):
Bulleted lists
~- Line one
~~- Line two
~-Line three
- Line one
- Line two
- Line three
Numbered lists
~1) Line one
~1) Line two
- Line one
- Line two
Ordered lists using uppercase characters
~A) Line one
~A) Line two
- Line one
- Line two
Ordered lists using lowercase characters
~a) Line one
~a) Line two
- Line one
- Line two
Ordered lists using roman numerals
~I) Line one
~I) Line two
- Line one
- Line two
Ordered lists using lowercase roman numerals
~i) Line one
~i) Line two
- Line one
- Line two
6. Inline comments
To format some text as an inline comment, use an indent ( ~, a tab or 4 spaces) followed by a &.
Example:
~& Comment
~~& Subcomment
~~~& Subsubcomment
- Comment
- Subcomment
- Subsubcomment
7. Images
To place images on a Wiki page, you can use the image action.
Example:
{{image class="center" alt="DVD logo" title="An Image Link" url="images/dvdvideo.gif" link="RecentChanges"}}
Links can be external, or internal Wiki links. You don't need to enter a link at all, and in that case just an image will be inserted. You can use the optional classes left and right to float images left and right. You don't need to use all those attributes, only url is required while alt is recommended for accessibility.
8. Links
To create a link to a wiki page you can use any of the following options:
- type a WikiName:
FormattingRules
FormattingRules
- add a forced link surrounding the page name by [[ | and ]] (everything after the first space will be shown as description):
[[SandBox | Test your formatting skills]]
Test your formatting skills
[[SandBox | 沙箱]]
沙箱
- add an image with a link (see instructions above).
To link to external pages, you can do any of the following:
- type a URL inside the page:
http://www.example.com
http://www.example.com
- add a forced link surrounding the URL by [[ | and ]] (everything after the first space will be shown as description):
[[http://example.com/jenna/ | Jenna's Home Page]]
Jenna's Home Page
[[mail@example.com | Write me!]]
Write me!
- add an image with a link (see instructions above);
- add an interwiki link (browse the list of available interwiki tags):
WikiPedia:WikkaWiki
WikiPedia:WikkaWiki
Google:CSS
Google:CSS
Thesaurus:Happy
Thesaurus:Happy
9. Tables
To create a table, you can use the table action.
Example:
{{table columns="3" cellpadding="1" cells="BIG;GREEN;FROGS;yes;yes;no;no;no;###"}}
| BIG | GREEN | FROGS |
| yes | yes | no |
| no | no |
Note that ### must be used to indicate an empty cell.
Complex tables can also be created by embedding HTML code in a wiki page (see instructions below).
10. Colored Text
Colored text can be created using the color action:
Example:
{{color c="blue" text="This is a test."}}
This is a test.
You can also use hex values:
Example:
{{color hex="#DD0000" text="This is another test."}}
This is another test.
11. Floats
To create a left floated box, use two < characters before and after the block.
Example:
<<Some text in a left-floated box hanging around<< Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.
Some text in a left-floated box hanging around
Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.Example:
>>Some text in a right-floated box hanging around>> Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.
Some text in a right-floated box hanging around
Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.12. Code formatters
You can easily embed code blocks in a wiki page using a simple markup. Anything within a code block is displayed literally.
To create a generic code block you can use the following markup:
%% This is a code block %%.
This is a code block
To create a code block with syntax highlighting, you must specify a code formatter (see below for a list of available code formatters). If line numbering is enabled in the wiki configuration, you can also specify a starting line number.
Example:
%%(php;15)
<?php
phpinfo();
echo "Hello, World!";
?>
%%
<?php
phpinfo();
echo "Hello, World!";
?>
%%
- <?php
- echo "Hello, World!";
- ?>
List of available code formatters:
| LANGUAGE | FORMATTER |
| Actionscript | actionscript |
| ADA | ada |
| Apache Log | apache |
| ASM | asm |
| ASP | asp |
| Bash | bash |
| C | c |
| C for Macs | c_mac |
| c# | csharp |
| C++ | cpp |
| CAD DCL | caddcl |
| CadLisp | cadlisp |
| CSS | css |
| Delphi | delphi |
| HTML | html4strict |
| Java | java |
| Javascript | javascript |
| Lisp | lisp |
| Lua | lua |
| NSIS | nsis |
| Objective C | objc |
| OpenOffice BASIC | oobas |
| Pascal | pascal |
| Perl | perl |
| PHP | php |
| Python | phyton |
| Q(uick)BASIC | qbasic |
| Smarty | smarty |
| SQL | sql |
| VB.NET | vbnet |
| Visual BASIC | vb |
| Visual Fox Pro | visualfoxpro |
| XML | xml |
13. Mindmaps
Wikka has native support for mindmaps. There are two options for embedding a mindmap in a wiki page.
Option 1: Upload a FreeMind file to a webserver, and then place a link to it on a wikka page:
http://yourdomain.com/freemind/freemind.mm
No special formatting is necessary.
Option 2: Paste the FreeMind data directly into a wikka page:
- Open a FreeMind file with a text editor.
- Select all, and copy the data.
- Browse to your Wikka site and paste the Freemind data into a page.
14. Embedded HTML
You can easily paste HTML in a wiki page by wrapping it into two sets of doublequotes.
""[html code]""
Examples:
""y = x<sup>n+1</sup>""
y = xn+1
""<acronym title="Cascade Style Sheet">CSS</acronym>""
CSS
By default, some HTML tags are removed by the SafeHTML parser to protect against potentially dangerous code. The list of tags that are stripped can be found on the Wikka:SafeHTML page.
It is possible to allow all HTML tags to be used, see Wikka:UsingHTML for more information.
CategoryWiki
- the problem with vertical whitespace not displayed is a known issue of the (beta) formatter installed on this server - see http://wikkawiki.org/ImprovedFormatter
- the ## wrappers were requested by MinusF to suggest that the first line in the examples indicates the markup, while the second line displays the rendered text.
- As for the CSS issue, what "skin"are you using on this server? Since the installation of some beta features, the default wikka.css skin on this server has been heavily hacked (including the section on tables) so it's not surprising that if you apply it to a fresh install there are a number of discrepancies.
- the ## is also depicted and used for monospace text, yet the displayed stuff wasn't seen as monotext .. maybe I'll have to look closer ..???
-- whatever the 'default' skin is ... don't recall trying to find or play with anything like that here ... all I've done on my install was to toss up a copy (renamed) of the .css here to the server so I could run the diff on it ... when the diff turned out to be massive, that went on the back-burner. If I understand your remarks, my statement was about the Table showing on this page being incomplete .. guess I'll have to look around to see where one changes a skin here.
- I spent a bunch of time .. guess I'll call it last nite .. trying to answer a user's query on how to left/right justify text. Should I bring it up 'here' or open up a new page, listing all the stuff I tried and failed with?
I have tried setting it up like this [[C/C++]] to no avail.
registered and can edit, i added it to the top of the list of double double-quote examples: ""CamelCase"" CamelCase. i don't want to register here just so i can add it so, maybe one of yous could do it. it might just help some other noob like me catch it as it went by. Thanks :)