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

248 lines
5.6 KiB
Plaintext

title: WikiText
type: text/vnd.tiddlywiki
tags: docs concepts
\define wikitext-example(src)
```
$src$
```
Renders as:
$src$
In HTML:
$$$text/vnd.tiddlywiki>text/html
$src$
$$$
\end
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:
<<wikitext-example src:"* ~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:
<<wikitext-example src:"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}}
```
Renders as:
{{Motovun Jack.jpg}}
! Lists
You can create unordered lists with `*` characters:
<<wikitext-example src:"* 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:
<<wikitext-example src:"* To do today
*# Eat
* To get someone else to do
*# This
*# That
*## And the other
">>
You can also create HTML definition lists:
<<wikitext-example src:"; 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:
<<wikitext-example src:"@@.myStyle
* List One
* List Two
@@
">>
Similar syntax is used to assign styles. For example:
<<wikitext-example src:"@@background-color:red;
* List One
* List Two
@@
">>
Multiple styles and classes can be mixed. For example:
<<wikitext-example src:"@@.aClass
@@width:400px;
Some text
@@
">>
You can also assign a CSS class to an individual member of a list with this notation:
<<wikitext-example src:"* List One
*.MyClass List Two
* List Three
">>
! 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:
<<wikitext-example src:"
---
">>
! 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
Widgets 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