WikiSyntax
On ZTwiki, writing or editing a contribution is easy, thanks to three formatting standards:
- WikiSyntax
- Some HTML coding
- Mix of both
The WikiSyntax is not standardized as much as the HTML language, but it is much easier. There are slight differences between each wiki engine (TikiWiki, Wikipedia, etc.) due to differences in features and modules installed, but the core of WikiSyntax is really close from one wiki to another. Therefore, you won't lose your time learning the particular version of WikiSyntax used on ZTwiki because it can be easily transposed to most wiki engine. ZTwiki use the TikiWiki syntax.
WikiSyntax is easy. As you type, you insert easy-to-remember special sequences of common characters, and the formating is done automatically. WikiSyntax uses a character repeated twice for most functions, but it also has a few 2-character combinations. With a 2-character combination, the characters are reversed when the function is turned off.
::Text written in __bold__ and ''italic''.::
Text centered, written in bold and italic.
WikiSyntax tags are much easier to type than HTML tags which would requires:
< CENTER >Text written in < B >bold< /B > and < I >italic< /I >< /CENTER >
Typing two underscores __ before and after a text string to get the bold effect (Wiki style) is much faster and easier than to type <, B, >, then <, /, B, >.< P > (HTML style)! Moreover, WikiSyntax is rather limited. There are not a thousand codes to learn. Most editing is done with few formatting code, so you'll pretty much know all codes. It takes perhaps half-an hour to get used to WikiSyntax.
Now, the simplicity of WikiSyntax comes with a price: some formatting can be hard to perform with WikiSyntax. For instance, creating a table with WikiSyntax is easy and suitable for small tables, but not for most large and complex tables.
TikiWiki solves this by allowing most common HTML codes in its pages. All you have to do, is to format the text with HTML the usual way rather than with WikiSyntax, and in the Edit page of, check the little option box that says:
'Allow HTML'. To write HTML code, you may prefer to type the text in an HTML editor first and paste it in the Wiki page after for fine tuning.
(I am not going to explain here how to write HTML code because it can be found anywhere on the Internet)
Fortunately with TikiWiki, you do not need to choose between WikiSyntax or HTML. Actually, you can use
both languages: WikiSyntax for its simplicity, and HTML for its power.
You can even mix both languages in the same paragraph. For example, you couldtype:
Text written in both __HTML__ and < font color="red" >WikiSyntax< /font >
Text written in both
HTML and
WikiSyntax
Of course, it is not very rational to use both formatting languages in way shown in the example above (and especially because there is a Wiki tag for red font!), but rationality is not as much important on Wiki as the quantity of contribution. The idea is to type a lot and format quickly. So you can use both languages if you need to.
Use Sandbox and Preview
Don't be afraid to try new things with formatting. Other users may help ironing out your formatting mistakes, and Wiki administrators can revert a page to an earlier version if things mess up. Still, even experienced users may need to refine formatting before publishing a page, so take the habit of using the
Preview button in the Edit box. It does what it says: it shows the result of formatting and you can use it as much as you want before saving the page. The
Sandbox is another way to test codes. It's available to registered users under the
Wiki submenu on the left. A sandbox is just a page that you can't save, so you can test anything you want without messing out existing pages.
Some basic codes
~ ~ ~ ~ ~Style ~ ~ ~ ~ ~ | Characters Used | Example | Comment
|
Bold Text | 2 Underscores "_" | __text__ | ~
|
Centered Text | 2 Colons ":" | ::text:: | The Centered Text can be centered within a Box, a Table, or almost anything else
|
Colored Text | 2 Tildes "~" | ~~blue:text~~ | ~
|
Italic Text | 2 Single Quotes "'" | ''text'' | ~
|
-+MonoSpaced Text+- | Minus & Plus "-" & "+" | -+text+- | be sure to keep the line length short.
|
Underlined Text | 3 Equals "=" | ===text=== | ~
|
| One carat " ^ " | ^text^ | ~
|
Non-breaking space | ~hs~~ | ~ |
|
Plain Text | surrounding np tags "~np~" | ~np~ __not bold__ ~/np~ | ~
|
Plugin disabledPlugin tag cannot be executed. Strike through text | {TAG(tag=>strike)}text{TAG} | {TAG(tag=>strike)}This text uses strikethrough{TAG} |
|
Colored Text (Click the + to Open)
[+]
Colored Text requires a Color Name to be specified. It can also be specified using HTML colors. The syntax is two Tildes (~) followed by the Pound (#) character and the Hex Numbers with a Colon (:) followed by the text to be colored. Two Tildes (~) mark the end of the Colored Text.
Example: ~~#ff00ff:This is text is the color Magenta ~~ produces:
This is text is the color Magenta
Courtesy of Damosoft Web Design
| | Color Name | Color HEX | - Colored Text - |
|
| AliceBlue | #F0F8FF | Colored Text |
|
| AntiqueWhite | #FAEBD7 | Colored Text |
|
| Aqua | #00FFFF | Colored Text |
|
| Aquamarine | #7FFFD4 | Colored Text |
|
| Azure | #F0FFFF | Colored Text |
|
| Beige | #F5F5DC | Colored Text |
|
| Bisque | #FFE4C4 | Colored Text |
|
| Black | #000000 | Colored Text |
|
| BlanchedAlmond | #FFEBCD | Colored Text |
|
| Blue | #0000FF | Colored Text |
|
| BlueViolet | #8A2BE2 | Colored Text |
|
| Brown | #A52A2A | Colored Text |
|
| BurlyWood | #DEB887 | Colored Text |
|
| CadetBlue | #5F9EA0 | Colored Text |
|
| Chartreuse | #7FFF00 | Colored Text |
|
| Chocolate | #D2691E | Colored Text |
|
| Coral | #FF7F50 | Colored Text |
|
| CornflowerBlue | #6495ED | Colored Text |
|
| Cornsilk | #FFF8DC | Colored Text |
|
| Crimson | #DC143C | Colored Text |
|
| Cyan | #00FFFF | Colored Text |
|
| DarkBlue | #00008B | Colored Text |
|
| DarkCyan | #008B8B | Colored Text |
|
| DarkGoldenRod | #B8860B | Colored Text |
|
| DarkGray | #A9A9A9 | Colored Text |
|
| DarkGreen | #006400 | Colored Text |
|
| DarkKhaki | #BDB76B | Colored Text |
|
| DarkMagenta | #8B008B | Colored Text |
|
| DarkOliveGreen | #556B2F | Colored Text |
|
| Darkorange | #FF8C00 | Colored Text |
|
| DarkOrchid | #9932CC | Colored Text |
|
| DarkRed | #8B0000 | Colored Text |
|
| DarkSalmon | #E9967A | Colored Text |
|
| DarkSeaGreen | #8FBC8F | Colored Text |
|
| DarkSlateBlue | #483D8B | Colored Text |
|
| DarkSlateGray | #2F4F4F | Colored Text |
|
| DarkTurquoise | #00CED1 | Colored Text |
|
| DarkViolet | #9400D3 | Colored Text |
|
| DeepPink | #FF1493 | Colored Text |
|
| DeepSkyBlue | #00BFFF | Colored Text |
|
| DimGray | #696969 | Colored Text |
|
| DodgerBlue | #1E90FF | Colored Text |
|
| Feldspar | #D19275 | Colored Text |
|
| FireBrick | #B22222 | Colored Text |
|
| FloralWhite | #FFFAF0 | Colored Text |
|
| ForestGreen | #228B22 | Colored Text |
|
| Fuchsia | #FF00FF | Colored Text |
|
| Gainsboro | #DCDCDC | Colored Text |
|
| GhostWhite | #F8F8FF | Colored Text |
|
| Gold | #FFD700 | Colored Text |
|
| GoldenRod | #DAA520 | Colored Text |
|
| Gray | #808080 | Colored Text |
|
| Green | #008000 | Colored Text |
|
| GreenYellow | #ADFF2F | Colored Text |
|
| HoneyDew | #F0FFF0 | Colored Text |
|
| HotPink | #FF69B4 | Colored Text |
|
| IndianRed | #CD5C5C | Colored Text |
|
| Indigo | #4B0082 | Colored Text |
|
| Ivory | #FFFFF0 | Colored Text |
|
| Khaki | #F0E68C | Colored Text |
|
| Lavender | #E6E6FA | Colored Text |
|
| LavenderBlush | #FFF0F5 | Colored Text |
|
| LawnGreen | #7CFC00 | Colored Text |
|
| LemonChiffon | #FFFACD | Colored Text |
|
| LightBlue | #ADD8E6 | Colored Text |
|
| LightCoral | #F08080 | Colored Text |
|
| LightCyan | #E0FFFF | Colored Text |
|
| LightGoldenRodYellow | #FAFAD2 | Colored Text |
|
| LightGrey | #D3D3D3 | Colored Text |
|
| LightGreen | #90EE90 | Colored Text |
|
| LightPink | #FFB6C1 | Colored Text |
|
| LightSalmon | #FFA07A | Colored Text |
|
| LightSeaGreen | #20B2AA | Colored Text |
|
| LightSkyBlue | #87CEFA | Colored Text |
|
| LightSlateBlue | #8470FF | Colored Text |
|
| LightSlateGray | #778899 | Colored Text |
|
| LightSteelBlue | #B0C4DE | Colored Text |
|
| LightYellow | #FFFFE0 | Colored Text |
|
| Lime | #00FF00 | Colored Text |
|
| LimeGreen | #32CD32 | Colored Text |
|
| Linen | #FAF0E6 | Colored Text |
|
| Magenta | #FF00FF | Colored Text |
|
| Maroon | #800000 | Colored Text |
|
| MediumAquaMarine | #66CDAA | Colored Text |
|
| MediumBlue | #0000CD | Colored Text |
|
| MediumOrchid | #BA55D3 | Colored Text |
|
| MediumPurple | #9370D8 | Colored Text |
|
| MediumSeaGreen | #3CB371 | Colored Text |
|
| MediumSlateBlue | #7B68EE | Colored Text |
|
| MediumSpringGreen | #00FA9A | Colored Text |
|
| MediumTurquoise | #48D1CC | Colored Text |
|
| MediumVioletRed | #C71585 | Colored Text |
|
| MidnightBlue | #191970 | Colored Text |
|
| MintCream | #F5FFFA | Colored Text |
|
| MistyRose | #FFE4E1 | Colored Text |
|
| Moccasin | #FFE4B5 | Colored Text |
|
| NavajoWhite | #FFDEAD | Colored Text |
|
| Navy | #000080 | Colored Text |
|
| OldLace | #FDF5E6 | Colored Text |
|
| Olive | #808000 | Colored Text |
|
| OliveDrab | #6B8E23 | Colored Text |
|
| Orange | #FFA500 | Colored Text |
|
| OrangeRed | #FF4500 | Colored Text |
|
| Orchid | #DA70D6 | Colored Text |
|
| PaleGoldenRod | #EEE8AA | Colored Text |
|
| PaleGreen | #98FB98 | Colored Text |
|
| PaleTurquoise | #AFEEEE | Colored Text |
|
| PaleVioletRed | #D87093 | Colored Text |
|
| PapayaWhip | #FFEFD5 | Colored Text |
|
| PeachPuff | #FFDAB9 | Colored Text |
|
| Peru | #CD853F | Colored Text |
|
| Pink | #FFC0CB | Colored Text |
|
| Plum | #DDA0DD | Colored Text |
|
| PowderBlue | #B0E0E6 | Colored Text |
|
| Purple | #800080 | Colored Text |
|
| Red | #FF0000 | Colored Text |
|
| RosyBrown | #BC8F8F | Colored Text |
|
| RoyalBlue | #4169E1 | Colored Text |
|
| SaddleBrown | #8B4513 | Colored Text |
|
| Salmon | #FA8072 | Colored Text |
|
| SandyBrown | #F4A460 | Colored Text |
|
| SeaGreen | #2E8B57 | Colored Text |
|
| SeaShell | #FFF5EE | Colored Text |
|
| Sienna | #A0522D | Colored Text |
|
| Silver | #C0C0C0 | Colored Text |
|
| SkyBlue | #87CEEB | Colored Text |
|
| SlateBlue | #6A5ACD | Colored Text |
|
| SlateGray | #708090 | Colored Text |
|
| Snow | #FFFAFA | Colored Text |
|
| SpringGreen | #00FF7F | Colored Text |
|
| SteelBlue | #4682B4 | Colored Text |
|
| Tan | #D2B48C | Colored Text |
|
| Teal | #008080 | Colored Text |
|
| Thistle | #D8BFD8 | Colored Text |
|
| Tomato | #FF6347 | Colored Text |
|
| Turquoise | #40E0D0 | Colored Text |
|
| Violet | #EE82EE | Colored Text |
|
| VioletRed | #D02090 | Colored Text |
|
| Wheat | #F5DEB3 | Colored Text |
|
| White | #FFFFFF | Colored Text |
|
| WhiteSmoke | #F5F5F5 | Colored Text |
|
| Yellow | #FFFF00 | Colored Text |
|
| YellowGreen | #9ACD32 | Colored Text |
|
Indent (Click the + to Open)
[+]
Indent is formed by the combination of the ; and : characters. ; must appear at the beginning of a line and : must appear between introduction text and the indented text. The introduction text portion is useful for forming definition type indention like Example 1 below. However the introduction text can be eliminated by simply including ;: together followed by the text as shown in Example 2.
Example 1:
;Intro Text: First example of indented text
produces:
- Intro Text
- Indented text
Example 2:
;:2nd example of indented text
- 2nd example of indented text
Using Square Brackets (Click the + to Open)
[+]
If you wish to include square brackets in your text (i.e. as regular text and not a link) simply add an additional open bracket to start. E.g.
[[this would not be a link]
Would render like this...
[this would not be a link]
[+]
!Header 1 at the beginning of a new line
!!Header 2 at the beginning of a new line
!!!Header 3 at the beginning of a new line
Numbered and bulleted lists (Click the + to Open)
[+]
Type the following at the beginning of new lines:
* A bulleted
* list of
* items
- A numbered
- list of
- items
Type the following at the beginning of new lines:
# A numbered
# list of
# items
[+]
For boxed text
Type
For non-interpreted text and fixed font use for code snippets
Type
{CODE()}
For non-interpreted text and fixed font use for code snippets
{CODE}
Hint use {CODE(wrap=1)} to wrap long lines
Links (Click the + to Open)
[+]