Wiki-Syntax Text

On this page, you'll learn how to format text on Wiki pages and other areas that support Wiki formatting (including articles, forums, and blogs).

The Markup Language Wiki-Syntax

The markup language used on a Wiki page is most commonly called Wiki Syntax. 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 specify the end of it.

The following sections explain most of this.

Quick Reference - Basic Text Formatting

Desired Formatting Syntax Result
Bold __text__ text
Centered ::text::

text

Color Font ~~blue:text~~ text
Italic ''text'' = ''text'' text
Monospaced -+text+- text
Underlined ===text=== text
Text box ^text^
Deleted --text-- text
Display syntax ~np~__not bold__~/np~ __not bold__

Toggle textarea with headline + / -

Copy to clipboard

''(click the [+]to open)'' !!!- Hidden by default Text text text text Text text text text Text text text text !!!+ Visible by default ''(click the [-]to close)'' Text text text text Text text text text Text text text text Hint: enclose the [+] and [-] in np (noparse) tags when using - they cannot be shown here in the CODE Plugin, as noparse tags conflict with the CODE Plugin


creates this:

''(click the [+]to open)''

Hidden by default

[+]

Text text text text
Text text text text
Text text text text

Visible by default

[-]

''(click the [+]to close)''
Text text text text
Text text text text
Text text text text

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.

Color Font

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: ~~red:This text is Red~~ produces: This text is Red


Color font 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 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: ~~#ff00ff:This text is the color Magenta ~~ produces: This text is the color Magenta


As of 3.0, the syntax was enhanced to also support background color changing.

Example: ~~blue,yellow:This text is blue with yellow background~~ This text is blue with yellow background

(click the [+] to open)

Web-Safe HTML Colors

[+]

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


Not all Color Names are valid in all Browsers, so to be on the safe side, it is useually 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: __This Text is Bold__ produces: This Text is Bold

Italic Text

Two Single Quote (') characters are used to make text Italic.

Example: ''This Text is Italic'' produces: This Text is Italic

Underlined Text

Three Equal (=) characters are used to underline text.

Example: ===This Text is Underlined=== produces: This Text is Underlined

Strikethrough text

Example:
--This text uses strikethrough--
produces:
This text uses strikethrough.

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: ::This Text is Centered:: 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. See also PluginMono for another way to apply the Monospace font.

Example: -+This Text uses a Monospaced Font+- produces: This Text uses a Monospaced Font

Image 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.
The Leading Space Monospaced Font is disabled on many sites.

Superscript and subscript

Use the {TAG} plugin (also see PluginTag).

Example:

This text is {TAG(tag=>sup)}super{TAG} script.

produces:

This text is

super

script.


This text is {TAG(tag=>sub)}sub{TAG} script.
produces:
This text is sub script.


Image Another alternative is to use the {SUB} and {SUP} plugins which are documented at PluginSub and PluginSup.

Text box

Apply one caret at the start and end of the text to be in a box.

Example: ^This Text is in a box^ produces:


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: ~np~This ''text'' is __not__ being ===formatted===~/np~ produces:

This ''text'' is __not__ being ===formatted===

NOTE: np tags cannot be used within an np block. To display an unprocessed ~np~ tag, escape all the characters (not just the tildes) while in normal processing mode:

~126~~110~~112~~126~ produces: ~np~
~126~~47~~110~~112~~126~ produces: ~/np~

Headings

Headings are formed by starting the line with one, two, or three exclamation marks ("!", "!!", or "!!!").

Note regarding customizing the appearance of headings: If you need to change the CSS property of a heading in the wikitext (by editing the theme stylesheet), be aware that a heading labeled "h1" (made with one exclamation point) is actually an HTML h2 heading, h2 is actually an HTML h3, and so on.


This is because, consistent with semantic layout, there should be only one h1 heading on a page, so in Tiki h1 is reserved for the page title. Although it may seem confusing to map the heading sizes down one level this way, it was decided as better than labeling the wikitext headings something like h2 to h5, with h1 apparently missing.

So to change the appearance of a wikipage's "h2" headings for example, actually it is the h3 selector in the stylesheet that needs to be edited (or .wikitext h3, if the theme has rules for wikitext headings in addition to default heading rules).

Numbered Headings

In tiki 2.0 and above, you can create numbered headings using a combination of the ! and # characters

  • !# My Heading will produce "1.0 My Heading"
  • !!# My Secondary Heading will produce "1.1 My Secondary Heading"
  • !!!# My Tertiary Heading will produce "1.1.1 My Tertiary Heading"

See: Headings

LineBreak (forced)

Basic WIKI markup language doesn't include "linebreak" element.
Nevertheless, with Tiki you can use a special command to force linebreaks into a text :
line break code (%%%), like so:
;:text %%% text %%% text
will look like this:

text
text
text

Note: There must be printable text after the linebreak. A space is not sufficient to introduce a blank line.

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:

;Intro Text: First example of indented text
produces:

Intro Text
First example of indented text

Example 2:
;:2nd example of indented text

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 ~hs~ to add the HTML " " for a non-breaking space.

~tc~ this is a tiki comment ~/tc~
Will be kept in the Wiki source file but not seen when the HTML page is generated or HTML page source is viewed.
~hc~ this is an HTML comment ~/hc~
Will be kept in the Wiki source file and will generate an HTML comment of the form

<!-- this is an HTML comment -->

An HTML comment will not be seen when the page is viewed but will be seen when the HTML page source is viewed.

Displaying code

You enter code blocks by enclosing the block between

Copy to clipboard

{CODE()} and {CODE}

.

This is a WikiPlugin, which extends the WikiSyntax.

Citation-style blockquotes


When Pluginquote is enabled, use this Tiki syntax code to make a simple blockquote properly:

Copy to clipboard

{QUOTE()} One of the hardest lessons of GUI programming is that hard coding behavior can be the Right Thing. Programmers are taught to make everything generic and infinitely flexible. The problem is that the more generic and infinitely flexible your UI is, the more similar it is to a programming language. — [https://www.joelonsoftware.com/uibook/chapters/fog0000000059.html | Joel Spolsky], April 2000 {QUOTE}


…which will render like this:

One of the hardest lessons of GUI programming is that hard coding behavior can be the Right Thing. Programmers are taught to make everything generic and infinitely flexible. The problem is that the more generic and infinitely flexible your UI is, the more similar it is to a programming language.
Joel Spolsky, April 2000


See PluginQuote for additional parameters that can be used as metadata for the quote.

You can also accomplish this using Markdown syntax, like this example:

Copy to clipboard

{MARKDOWN()} > As Joel points out, advanced users do not want a million (…) preferences when things should just work on their own. The point rings true in my experience. > > — Havoc Pennington {MARKDOWN}


…which will render like this:

As Joel points out, advanced users do not want a million (…) preferences when things should just work on their own. The point rings true in my experience.

— Havoc Pennington


Other Ways to Indent a Text Block

You can use the div module if it's enabled like so:

Copy to clipboard

{div(type="blockquote")}Bananas Apples Oranges{div}


Will result in:

Bananas

Apples

Oranges

Useful Links