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

title: WikiText
type: text/vnd.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 designed to be familiar for users of [[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: `[[Displayed Link Title|Tiddler 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:

* <code>&#96;backticks&#96;</code> 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 triple backticks <code>&#96;&#96;&#96;</code> to mark code blocks:

<pre>
&#96;&#96;&#96;
This will be monospaced
&#96;&#96;&#96;
</pre>

Renders as:

```
This will be monospaced
```

! Transclusion

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

* `{{MyTiddler}}` transcludes a single tiddler
* `{{MyTiddler|tooltip}}` adds a tooltip
* `{{MyTiddler||TemplateTitle}}` displays the tiddler through a specified [[TiddlerTemplate|TiddlerTemplates]]
* `{{MyTiddler|tooltip||TemplateTitle}}` specifies both a tooltip and a template for the transcluded content
* `{{MyTiddler}width:40;height:50;}.firstClass.secondClass` transcludes a single tiddler, adding the specified styles and classes to the transcluded content

A similar syntax can be used to transclude a list of tiddlers matching a specified [[TiddlerFilter|TiddlerFilters]]:

```
{{{ [tag[docs]] }}}
{{{ [tag[docs]] |tooltip}}}
{{{ [tag[docs]] ||TemplateTitle}}}
{{{ [tag[docs]] |tooltip||TemplateTitle}}}
{{{ [tag[docs]] }}width:40;height:50;}.class.class
```

! Images

To display an image stored in a tiddler just transclude that tiddler

```
{{Motovun Jack.jpg}}
```

Displays as:

{{Motovun Jack.jpg}}

See ImageWikiText for more details.

! 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

! Adding styles and classes

You can use this construction to cause the wrapped content to be assigned specified CSS classes or styles:

```
@@.myStyle
* List One
* List Two	
@@
```

The resulting HTML looks like this:

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

Similar syntax is used to assign styles. For example:

```
@@background-color:red;
* List One
* List Two	
@@
```

The resulting HTML looks like this:

```
<ul style="background-color:red;">
	<li>List One</li>
	<li>List Two</li>
</ul>
```

Multiple styles and classes can be mixed. For example:

```
@@.aClass
@@width:400px;
Some text
@@
```

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>
```

! 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:

---

! 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>
```

! Widgets

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

```
<_video src="32001208" type="vimeo" />
```

For full details of the available widgets, 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
```

CSS classes can be assigned to individual headings like this:

```
!.myStyle This heading has the class `myStyle`
```

! 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