TiddlyWiki5/tw5.com/tiddlers/concepts/WikiText.tid

title: WikiText
type: text/x-tiddlywiki
tags: docs concepts

WikiText is a concise, expressive way of typing a wide range of text formatting, hypertext and interactive features. It allows you to focus on writing without a complex user interface getting in the way. It is somewhat similar to [[MarkDown|http://daringfireball.net/projects/markdown/]], but with more of a focus on linking and the interactive features.

! Linking in WikiText

A key capability of WikiText is the ability to make links to other tiddlers or to external websites. There are several ways of doing this:

* To link to a tiddler by title: `[[Tiddler Title]]`
* To link to a tiddler and specify the text of the link: `[[Tiddler Title|Displayed Link Title]]`
* For tiddler titles that match the CamelCase rules, just typing the title will automatically create a link
* To link to an external website, type the full URL of the site: `http://five.tiddlywiki.com/`

You can suppress a link from being recognised by preceding it with `~`. For example:

{{{
* ~HelloThere is not a link
* ~http://google.com/ is not a link
}}}

Renders as:

* ~HelloThere is not a link
* ~http://google.com/ is not a link

! Paragraphs

To mark the end of a paragraph in TiddlyWiki you need to type `enter` twice to create a double line break:

{{{
This is the first paragraph.

And this is the second paragraph.
}}}

Single line breaks are ignored within paragraphs. For example:

{{{
This is a
paragraph made
up of
short lines


}}}

Renders as:

This is a
paragraph made
up of
short lines

! Formatting

Available character formatting includes:

* {{{`backticks`}}} for `code`
* `''bold''` for ''bold text''
* `//italic//` for //italic text//
* `__underscore__` for __underscored text__
* `^^superscript^^` for ^^superscript^^ text
* `~~subscript~~` for ~~subscripted~~ text
* `--strikethrough--` for --strikethrough-- text

You can also use `{{{` to mark code blocks:

{{{
 {{{
 This will be monospaced
 }}}
}}}

! Transclusion

You can incorporate the content of one tiddler within another using the transclusion notation:

* `((JeremyRuston))` transcludes a single tiddler
* `((( [tag[docs]] )))`, with triple parenthesis, transcludes all the tiddlers that match a [[TiddlerFilter|TiddlerFilters]]

A template can also be specified, in which case the tiddler(s) are rendered through that [[TiddlerTemplate|TiddlerTemplates]]. Templates can either be specified directly or instead a tiddler can be specified from which the template is extracted.

* `((MyTiddler) <<view title>> by <<view modified>>)` renders the tiddler `MyTiddler` through a template that will yield `MyTiddler by JeremyRuston`, if the `modified` field is set to "JeremyRuston"
* `((MyTiddler)(MyTemplate))` renders the tiddler `MyTiddler` through the template `MyTemplate`

! Lists

You can create unordered lists with `*` characters:

{{{
* First list item
* Second list item
** A subitem
* Third list item
}}}

Renders as:

* First list item
* Second list item
** A subitem
* Third list item

Ordered lists use `#` instead of `*`:

# First item
# Second item
# Third item

You can also mix ordered and unordered list items:

{{{
* To do today
*# Eat
* To get someone else to do
*# This
*# That
*## And the other
}}}

Renders as:

* To do today
*# Eat
* To get someone else to do
*# This
*# That
*## And the other

You can also create HTML definition lists:

{{{
; Term being defined
: Definition of that term
; Another term
: Another definition
}}}

Renders as:

; Term being defined
: Definition of that term
; Another term
: Another definition

! Cascading Stylesheets

You can use this construction to cause the wrapped content to be assigned a specified CSS class:

{{{
 {{myStyle{
 * List One
 * List Two	
 }}}
}}}

The resulting HTML looks like this:

{{{
<ul class="myStyle">
	<li>List One</li>
	<li>List Two</li>
</ul>
}}}

You can also assign a CSS class to an individual member of a list with this notation:

{{{
* List One
*{{MyClass}} List Two
* List Three
}}}

The resulting HTML looks like this:

{{{
<ul>
	<li>List One</li>
	<li class="MyClass">List Two</li>
	<li> List Three</li>
</ul>
}}}

The same syntax can be used with headings:

{{{
!{{myStyle}} This heading has the class `myStyle`
}}}

! Typographic Features

You can create an n-dash with a double hyphen `--` and an m-dash with a triple hyphen `---`. For example -- this is an example --- and so is this

You can include a horizontal rule with three or more dashes on their own on a line:

{{{
---
}}}

Renders as:

---

! Images

To display an image stored in a tiddler:

{{{
[img[Motovun Jack.jpg]]
}}}

Displays as:

[img[Motovun Jack.jpg]]

See ImageWikiText for more details.

! HTML in WikiText

HTML tags and comments can be used directly in WikiText. For example:

{{{
<article class="hello">
This is my nice and simple block of text. HelloThere
<!-- This comment will not appear in the wikified output -->
</article>
}}}

! Macros

Macros provide rich functionality within WikiText. For example, the `<<video>>` macro can be used to embed videos from YouTube, Vimeo or the Internet Archive:

{{{
<<video src:32001208 type:vimeo>>
}}}

For full details of the available macros, see the [[Docs]].

! Headings

Headings are specified with one or more leading `!` characters:

{{{
! This is a level 1 heading

!! This is a level 2 heading

!!! This is a level 3 heading
}}}

! Other WikiText features

!! Typed Blocks

You can incorporate text of a different type within blocks of WikiText. For example:

{{{
$$$.js
return 2 + "string";
$$$
}}}

Renders as:

$$$.js
return 2 + "string";
$$$

See TypedBlockWikiText for more details

!! Style Blocks

You can apply HTML attributes to blocks of content with this syntax:

{{{
@@color:#f00;
@@text-decoration:underline;
This is in red!
@@
}}}

Generates the results:

@@color:#f00;
@@text-decoration:underline;
This is in red!
@@

See StyleBlockWikiText for more details.