History: Wiki Syntax
Source of version: 28
Copy to clipboard
TikiWiki has a rich and flexible system for formatting and presenting pages.
!!Related pages
----
((Wiki-Syntax Images))
((Wiki-Syntax Links))
((Wiki-Syntax Lists))
((Wiki-Syntax Special Characters))
((Wiki-Syntax Tables))
((Advanced Wiki Syntax usage examples))
((Plugins)) advanced features/formatting that can be included in wiki pages
!!Formatting text with wiki syntax
----
On this page, you'll learn how to format text on Wiki pages and other area that support ((Wiki)) formatting (including articles, forums, and blogs).
!!About Wiki-Syntax
Wiki syntax is a markup language used in wiki. To avoid requiring users to learn HTML, it uses common characters in uncommon ways (or character combinations that are not normally used together) and provides them with a special meaning. Some of the character combinations only work at the beginning of a line, while others can be inserted anywhere in the text and are active until they are turned off.
Wiki-Syntax 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. MonoSpaced Text provides a good example of this; the Minus (-) and Plus (+) characters are used to start the using MonoSpaced Text and a Plus (+) and Minus (-) characters specifies the end of it.
!!
{maketoc}
!!! Quick Reference - Basic Text Formatting
{FANCYTABLE(head=> __Desired Formatting__ ~|~ __Syntax__ ~|~ __Result__ )}
Bold ~|~ ~np~__text__~/np~ ~|~ __text__
Centered ~|~ ~np~::text::~/np~ ~|~ ::text::
Color Font ~|~~np~~~blue:text~~~/np~ ~|~ ~~blue:text~~
Italic ~|~ ~np~''text''~/np~ ~|~ ''text''
MonoSpaced ~|~ ~np~-+text+-~/np~ ~|~ -+text+-
Underlined ~|~ ~np~===text===~/np~ ~|~ ===text===
Text box ~|~ ~np~^text^~/np~ ~|~ ^text^
Display syntax ~|~ ~126~~110~~112~~126~~np~__not bold__~/np~~126~~47~~110~~112~~126~ ~|~ ~126~~110~~112~~126~~np~__not bold__~/np~~126~~47~~110~~112~~126~
{FANCYTABLE}
!!! Basic Text Formatting
The Wiki-Syntax given in this section can be located anywhere in the text so that specific characters, words, or sentences can be emphasized.
!!! Colored Text
Text can be any color you want it to be. Two Tildes (~) are used followed by the name of a color and a Colon (:) to specify the start of the Colored Text. Two other Tildes (~) are used to end the Colored Text.
^ Example: ~np~~~red:This is text is Red~~~/np~ produces:
~~red:This is text is Red~~ ^
Colored Text can also be specified using HTML colors. HTML colors use 3 pairs of Hex numbers; one for Red, Blue, & Green so that 00 00 00 would produce black and ff ff ff would produce white. 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: ~np~~~#ff00ff:This is text is the color Magenta ~~~/np~ produces:
~~#ff00ff:This is text is the color Magenta ~~ ^
!!!- Web-Safe HTML Colors (Click the [+] to Open)
Courtesy of Damosoft Web Design
|| | :: Color Name:: | :: Color HEX :: | :: - Colored Text - :: |
| AliceBlue| ::#F0F8FF:: | ~~#F0F8FF:Colored Text~~ |
| AntiqueWhite| ::#FAEBD7:: | ~~#FAEBD7:Colored Text~~ |
| Aqua| ::#00FFFF:: | ~~#00FFFF:Colored Text~~ |
| Aquamarine| ::#7FFFD4:: | ~~#7FFFD4:Colored Text~~ |
| Azure| ::#F0FFFF:: | ~~#F0FFFF:Colored Text~~ |
| Beige| ::#F5F5DC:: | ~~#F5F5DC:Colored Text~~ |
| Bisque| ::#FFE4C4:: | ~~#FFE4C4:Colored Text~~ |
| Black| ::#000000:: | ~~#000000:Colored Text~~ |
| BlanchedAlmond| ::#FFEBCD:: | ~~#FFEBCD:Colored Text~~ |
| Blue| ::#0000FF:: | ~~#0000FF:Colored Text~~ |
| BlueViolet| ::#8A2BE2:: | ~~#8A2BE2:Colored Text~~ |
| Brown| ::#A52A2A:: | ~~#A52A2A:Colored Text~~ |
| BurlyWood| ::#DEB887:: | ~~#DEB887:Colored Text~~ |
| CadetBlue| ::#5F9EA0:: | ~~#5F9EA0:Colored Text~~ |
| Chartreuse| ::#7FFF00:: | ~~#7FFF00:Colored Text~~ |
| Chocolate| ::#D2691E:: | ~~#D2691E:Colored Text~~ |
| Coral| ::#FF7F50:: | ~~#FF7F50:Colored Text~~ |
| CornflowerBlue| ::#6495ED:: | ~~#6495ED:Colored Text~~ |
| Cornsilk| ::#FFF8DC:: | ~~#FFF8DC:Colored Text~~ |
| Crimson| ::#DC143C:: | ~~#DC143C:Colored Text~~ |
| Cyan| ::#00FFFF:: | ~~#00FFFF:Colored Text~~ |
| DarkBlue| ::#00008B:: | ~~#00008B:Colored Text~~ |
| DarkCyan| ::#008B8B:: | ~~#008B8B:Colored Text~~ |
| DarkGoldenRod| ::#B8860B:: | ~~#B8860B:Colored Text~~ |
| DarkGray| ::#A9A9A9:: | ~~#A9A9A9:Colored Text~~ |
| DarkGreen| ::#006400:: | ~~#006400:Colored Text~~ |
| DarkKhaki| ::#BDB76B:: | ~~#BDB76B:Colored Text~~ |
| DarkMagenta| ::#8B008B:: | ~~#8B008B:Colored Text~~ |
| DarkOliveGreen| ::#556B2F:: | ~~#556B2F:Colored Text~~ |
| Darkorange| ::#FF8C00:: | ~~#FF8C00:Colored Text~~ |
| DarkOrchid| ::#9932CC:: | ~~#9932CC:Colored Text~~ |
| DarkRed| ::#8B0000:: | ~~#8B0000:Colored Text~~ |
| DarkSalmon| ::#E9967A:: | ~~#E9967A:Colored Text~~ |
| DarkSeaGreen| ::#8FBC8F:: | ~~#8FBC8F:Colored Text~~ |
| DarkSlateBlue| ::#483D8B:: | ~~#483D8B:Colored Text~~ |
| DarkSlateGray| ::#2F4F4F:: | ~~#2F4F4F:Colored Text~~ |
| DarkTurquoise| ::#00CED1:: | ~~#00CED1:Colored Text~~ |
| DarkViolet| ::#9400D3:: | ~~#9400D3:Colored Text~~ |
| DeepPink| ::#FF1493:: | ~~#FF1493:Colored Text~~ |
| DeepSkyBlue| ::#00BFFF:: | ~~#00BFFF:Colored Text~~ |
| DimGray| ::#696969:: | ~~#696969:Colored Text~~ |
| DodgerBlue| ::#1E90FF:: | ~~#1E90FF:Colored Text~~ |
| Feldspar| ::#D19275:: | ~~#D19275:Colored Text~~ |
| FireBrick| ::#B22222:: | ~~#B22222:Colored Text~~ |
| FloralWhite| ::#FFFAF0:: | ~~#FFFAF0:Colored Text~~ |
| ForestGreen| ::#228B22:: | ~~#228B22:Colored Text~~ |
| Fuchsia| ::#FF00FF:: | ~~#FF00FF:Colored Text~~ |
| Gainsboro| ::#DCDCDC:: | ~~#DCDCDC:Colored Text~~ |
| GhostWhite| ::#F8F8FF:: | ~~#F8F8FF:Colored Text~~ |
| Gold| ::#FFD700:: | ~~#FFD700:Colored Text~~ |
| GoldenRod| ::#DAA520:: | ~~#DAA520:Colored Text~~ |
| Gray| ::#808080:: | ~~#808080:Colored Text~~ |
| Green| ::#008000:: | ~~#008000:Colored Text~~ |
| GreenYellow| ::#ADFF2F:: | ~~#ADFF2F:Colored Text~~ |
| HoneyDew| ::#F0FFF0:: | ~~#F0FFF0:Colored Text~~ |
| HotPink| ::#FF69B4:: | ~~#FF69B4:Colored Text~~ |
| IndianRed | ::#CD5C5C:: | ~~#CD5C5C:Colored Text~~ |
| Indigo | ::#4B0082:: | ~~#4B0082:Colored Text~~ |
| Ivory| ::#FFFFF0:: | ~~#FFFFF0:Colored Text~~ |
| Khaki| ::#F0E68C:: | ~~#F0E68C:Colored Text~~ |
| Lavender| ::#E6E6FA:: | ~~#E6E6FA:Colored Text~~ |
| LavenderBlush| ::#FFF0F5:: | ~~#FFF0F5:Colored Text~~ |
| LawnGreen| ::#7CFC00:: | ~~#7CFC00:Colored Text~~ |
| LemonChiffon| ::#FFFACD:: | ~~#FFFACD:Colored Text~~ |
| LightBlue| ::#ADD8E6:: | ~~#ADD8E6:Colored Text~~ |
| LightCoral| ::#F08080:: | ~~#F08080:Colored Text~~ |
| LightCyan| ::#E0FFFF:: | ~~#E0FFFF:Colored Text~~ |
| LightGoldenRodYellow| ::#FAFAD2:: | ~~#FAFAD2:Colored Text~~ |
| LightGrey| ::#D3D3D3:: | ~~#D3D3D3:Colored Text~~ |
| LightGreen| ::#90EE90:: | ~~#90EE90:Colored Text~~ |
| LightPink| ::#FFB6C1:: | ~~#FFB6C1:Colored Text~~ |
| LightSalmon| ::#FFA07A:: | ~~#FFA07A:Colored Text~~ |
| LightSeaGreen| ::#20B2AA:: | ~~#20B2AA:Colored Text~~ |
| LightSkyBlue| ::#87CEFA:: | ~~#87CEFA:Colored Text~~ |
| LightSlateBlue| ::#8470FF:: | ~~#8470FF:Colored Text~~ |
| LightSlateGray| ::#778899:: | ~~#778899:Colored Text~~ |
| LightSteelBlue| ::#B0C4DE:: | ~~#B0C4DE:Colored Text~~ |
| LightYellow| ::#FFFFE0:: | ~~#FFFFE0:Colored Text~~ |
| Lime| ::#00FF00:: | ~~#00FF00:Colored Text~~ |
| LimeGreen| ::#32CD32:: | ~~#32CD32:Colored Text~~ |
| Linen| ::#FAF0E6:: | ~~#FAF0E6:Colored Text~~ |
| Magenta| ::#FF00FF:: | ~~#FF00FF:Colored Text~~ |
| Maroon| ::#800000:: | ~~#800000:Colored Text~~ |
| MediumAquaMarine| ::#66CDAA:: | ~~#66CDAA:Colored Text~~ |
| MediumBlue| ::#0000CD:: | ~~#0000CD:Colored Text~~ |
| MediumOrchid| ::#BA55D3:: | ~~#BA55D3:Colored Text~~ |
| MediumPurple| ::#9370D8:: | ~~#9370D8:Colored Text~~ |
| MediumSeaGreen| ::#3CB371:: | ~~#3CB371:Colored Text~~ |
| MediumSlateBlue| ::#7B68EE:: | ~~#7B68EE:Colored Text~~ |
| MediumSpringGreen| ::#00FA9A:: | ~~#00FA9A:Colored Text~~ |
| MediumTurquoise| ::#48D1CC:: | ~~#48D1CC:Colored Text~~ |
| MediumVioletRed| ::#C71585:: | ~~#C71585:Colored Text~~ |
| MidnightBlue| ::#191970:: | ~~#191970:Colored Text~~ |
| MintCream| ::#F5FFFA:: | ~~#F5FFFA:Colored Text~~ |
| MistyRose| ::#FFE4E1:: | ~~#FFE4E1:Colored Text~~ |
| Moccasin| ::#FFE4B5:: | ~~#FFE4B5:Colored Text~~ |
| NavajoWhite| ::#FFDEAD:: | ~~#FFDEAD:Colored Text~~ |
| Navy| ::#000080:: | ~~#000080:Colored Text~~ |
| OldLace| ::#FDF5E6:: | ~~#FDF5E6:Colored Text~~ |
| Olive| ::#808000:: | ~~#808000:Colored Text~~ |
| OliveDrab| ::#6B8E23:: | ~~#6B8E23:Colored Text~~ |
| Orange| ::#FFA500:: | ~~#FFA500:Colored Text~~ |
| OrangeRed| ::#FF4500:: | ~~#FF4500:Colored Text~~ |
| Orchid| ::#DA70D6:: | ~~#DA70D6:Colored Text~~ |
| PaleGoldenRod| ::#EEE8AA:: | ~~#EEE8AA:Colored Text~~ |
| PaleGreen| ::#98FB98:: | ~~#98FB98:Colored Text~~ |
| PaleTurquoise| ::#AFEEEE:: | ~~#AFEEEE:Colored Text~~ |
| PaleVioletRed| ::#D87093:: | ~~#D87093:Colored Text~~ |
| PapayaWhip| ::#FFEFD5:: | ~~#FFEFD5:Colored Text~~ |
| PeachPuff| ::#FFDAB9:: | ~~#FFDAB9:Colored Text~~ |
| Peru| ::#CD853F:: | ~~#CD853F:Colored Text~~ |
| Pink| ::#FFC0CB:: | ~~#FFC0CB:Colored Text~~ |
| Plum| ::#DDA0DD:: | ~~#DDA0DD:Colored Text~~ |
| PowderBlue| ::#B0E0E6:: | ~~#B0E0E6:Colored Text~~ |
| Purple| ::#800080:: | ~~#800080:Colored Text~~ |
| Red| ::#FF0000:: | ~~#FF0000:Colored Text~~ |
| RosyBrown| ::#BC8F8F:: | ~~#BC8F8F:Colored Text~~ |
| RoyalBlue| ::#4169E1:: | ~~#4169E1:Colored Text~~ |
| SaddleBrown| ::#8B4513:: | ~~#8B4513:Colored Text~~ |
| Salmon| ::#FA8072:: | ~~#FA8072:Colored Text~~ |
| SandyBrown| ::#F4A460:: | ~~#F4A460:Colored Text~~ |
| SeaGreen| ::#2E8B57:: | ~~#2E8B57:Colored Text~~ |
| SeaShell| ::#FFF5EE:: | ~~#FFF5EE:Colored Text~~ |
| Sienna| ::#A0522D:: | ~~#A0522D:Colored Text~~ |
| Silver| ::#C0C0C0:: | ~~#C0C0C0:Colored Text~~ |
| SkyBlue| ::#87CEEB:: | ~~#87CEEB:Colored Text~~ |
| SlateBlue| ::#6A5ACD:: | ~~#6A5ACD:Colored Text~~ |
| SlateGray| ::#708090:: | ~~#708090:Colored Text~~ |
| Snow| ::#FFFAFA:: | ~~#FFFAFA:Colored Text~~ |
| SpringGreen| ::#00FF7F:: | ~~#00FF7F:Colored Text~~ |
| SteelBlue| ::#4682B4:: | ~~#4682B4:Colored Text~~ |
| Tan| ::#D2B48C:: | ~~#D2B48C:Colored Text~~ |
| Teal| ::#008080:: | ~~#008080:Colored Text~~ |
| Thistle| ::#D8BFD8:: | ~~#D8BFD8:Colored Text~~ |
| Tomato| ::#FF6347:: | ~~#FF6347:Colored Text~~ |
| Turquoise| ::#40E0D0:: | ~~#40E0D0:Colored Text~~ |
| Violet| ::#EE82EE:: | ~~#EE82EE:Colored Text~~ |
| VioletRed| ::#D02090:: | ~~#D02090:Colored Text~~ |
| Wheat| ::#F5DEB3:: | ~~#F5DEB3:Colored Text~~ |
| White| ::#FFFFFF:: | ~~#FFFFFF:Colored Text~~ |
| WhiteSmoke| ::#F5F5F5:: | ~~#F5F5F5:Colored Text~~ |
| Yellow| ::#FFFF00:: | ~~#FFFF00:Colored Text~~ |
| YellowGreen| ::#9ACD32:: | ~~#9ACD32:Colored Text~~ |
||
{picture file=img/icons2/alert.gif} Not all Color Names are valid in all Browsers, so to be on the safe side, it is usually best to use the HTML number by default. If these colors do not meet your requirements, see the link at the bottom of the page for the Color Picker II.
!!! Bold Text
Two Underscore (_) characters are used to make text Bold.
^Example: -+~np~__This Text is Bold__~/np~+- produces:
__This Text is Bold__^
!!! Italic Text
Two Single Quote (') characters are used to make text Italic.
^Example: ~np~''This Text is Italic''~/np~ produces:
''This Text is Italic''^
!!! Underlined Text
Three Equal (=) characters are used to underline text.
^Example: ~np~===This Text is Underlined===~/np~ produces:
===This Text is Underlined===^
!!!Strike through text
Use the ~np~{TAG}~/np~ plugin.
^Example: %%% __~np~{TAG(tag=>strike)}This text uses strikethrough{TAG}~/np~__ %%% produces: %%% {TAG(tag=>strike)}This text uses strikethrough{TAG}.^
!!! Centered Text
Two Colon (:) characters are used to Center text. The Centered Text can be centered within a Box, a Table, or almost anything else.
^Example: ~np~::This Text is Centered::~/np~ produces:
::This Text is Centered::^
!!! Monospaced Text for Code
Monospaced Text is useful when displaying Code and can be created in two ways. The easiest is to start a new line with one or more spaces. The Minus (-) and Plus (+) character combination can also be used to specify a Monospaced Text.
^Example: ~np~-+This Text uses a Monospaced Font+-~/np~ produces:
-+This Text uses a Monospaced Font+- ^
{picture file=img/icons2/alert.gif} If using a Monospaced Font, be sure to keep the line length short. If the lines are too long, they will push the right column out of the browser display area.
{picture file=img/icons2/alert.gif} The Leading Space Monospaced Font is disabled on many sites.
!!!Superscript and subscript
Use the ~np~{TAG}~/np~ plugin (also see ((PluginTag))).
^Example: %%% __~np~This text is {TAG(tag=>sup)}super{TAG} script.~/np~__ %%% produces: %%% This text is {TAG(tag=>sup)}super{TAG} script.
__~np~This text is {TAG(tag=>sub)}sub{TAG} script.~/np~__
produces:
This text is {TAG(tag=>sub)}sub{TAG} script.
^
{img src="pics/icons/book_open.png"} ''Another alternative is to use the ~np~{SUB}~/np~ and ~np~{SUP}~/np~ plugins which are documented at ((PluginSub)) and ((PluginSup)).''
!!!Text box
Apply one caret at start and end of text to be in a box.
Example: ~np~^This Text is in a box^~/np~ produces:
^This Text is in a box^
NOTE: This CSS style is called "simplebox" and may look different or may not exist, depending on your theme CSS.
!!!Plain Text
To turn off tiki formatting, surround your text with 'np' a.k.a. 'no processing' tags
Example: ~126~~110~~112~~126~~np~This ''text'' is __not__ being ===formatted===~/np~~126~~47~~110~~112~~126~ produces:
~np~This ''text'' is __not__ being ===formatted===~/np~
NOTE: np tags cannot be used within an np block. To display an unprocessed ~126~~110~~112~~126~ tag, escape all the characters (not just the tildes) while in normal processing mode:
~126~126~126~~126~110~126~~126~112~126~~126~126~126~ produces: ~126~~110~~112~~126~
~126~126~126~~126~47~126~~126~110~126~~126~112~126~~126~126~126~ produces: ~126~~47~~110~~112~~126~
!!!Indent
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:
~np~;Intro Text: First example of indented text~/np~
produces:
;Intro Text: Indented text
Example 2:
~np~;:2nd example of indented text~/np~
;:2nd example of indented text^
!! Using Square Brackets
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]
!! Non-breaking space
Use ~np~ ~hs~ ~/np~ to add the HTML " " for a non-breaking space.
!!Comments
!!!Wiki Comments
;~np~ ~tc~ this is a tiki comment ~/tc~ ~/np~: Will be kept in the file but not seen when the page or page source is viewed
!!!html Comments
;~np~ ~hc~ this is an html comment ~/hc~ ~/np~: Will be kept in the file and will generate an html comment of the form ^~np~<!-- this is an html comment -->~/np~^ it will not be seen when the page is viewed but will be seen when the page source is viewed.
!Useful Links
*((tw:Why Wiki Syntax is Important))
* The Color Picker II is located at [http://www.pagetutor.com/pagetutor/makapage/picker/]
* [https://addons.mozilla.org/extensions/moreinfo.php?id=60|Web Developer extension] for [http://www.mozilla-europe.org/fr/products/firefox/|Mozilla Firefox]
* The wiki syntax is not standardised across applications. There is an initiative to publish the Wiki-Syntax as an RFC from the [http://www.ietf.org/|IETF]. See [http://tikiwiki.org/RFCWiki|RFCWiki]