mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-09 03:19:56 +00:00
04e2f18ff1
Now that transclusion doesn't generate any intrinsic elements we don't have an element to attach the tooltip, classes and styles to.
288 lines
6.7 KiB
Plaintext
288 lines
6.7 KiB
Plaintext
tags: concepts
|
|
type: text/vnd.tiddlywiki
|
|
title: WikiText
|
|
modified: 201310291329
|
|
|
|
\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>`backticks`</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>```</code> to mark code blocks:
|
|
|
|
<pre>
|
|
```
|
|
This will be monospaced
|
|
```
|
|
</pre>
|
|
|
|
The three backticks need to be at the start of the line and immediately followed by a newline, otherwise they won't be interpreted correctly.
|
|
|
|
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||TemplateTitle}}` displays the tiddler through a specified [[TiddlerTemplate|TiddlerTemplates]]
|
|
|
|
A similar syntax can be used to transclude a list of tiddlers matching a specified [[TiddlerFilter|TiddlerFilters]]:
|
|
|
|
```
|
|
{{{ [tag[mechanism]] }}}
|
|
{{{ [tag[mechanism]] ||TemplateTitle}}}
|
|
```
|
|
|
|
! 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:"@@.tw-tiddler-frame
|
|
@@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:"
|
|
---
|
|
">>
|
|
|
|
! Macros
|
|
|
|
Macros are snippets of text that can be inserted with a concise shortcut. A macro is defined like this:
|
|
|
|
```
|
|
\define mysamplemacro(name:"Bugs Bunny",address:"Rabbit Hole Hill")
|
|
Hi, I'm $name$ and I live in $address$
|
|
\end
|
|
```
|
|
|
|
The first line of the definition specifies the macro name and any parameters. Parameters are named and can optionally have default values that are used if the parameter isn't specified at the time of calling. The body of the macro definition follows, terminated with `\end`. The macro can include parameters using the `$name$` construction.
|
|
|
|
Macro definitions must be placed at the top of a tiddler. Macros are available to the tiddler that defines them, plus any tiddlers that it transcludes.
|
|
|
|
Macros are used like this:
|
|
|
|
```
|
|
<<mysamplemacro>>
|
|
<<mysamplemacro "Donald Duck">>
|
|
<<mysamplemacro "Mickey Mouse" "Mouse House">>
|
|
```
|
|
|
|
Resulting in:
|
|
|
|
```
|
|
Hi I'm Bugs Bunny and I live in Rabbit Hole Hill
|
|
Hi I'm Donald Duck and I live in Rabbit Hole Hill
|
|
Hi I'm Mickey Mouse and I live in Mouse House
|
|
|
|
```
|
|
|
|
! 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>
|
|
```
|
|
|
|
Attributes in HTML tags can be specified as a transclusion or a macro invocation. For example, here the value of the `href` attribute will be set to the value of the tiddler MyLinkDestination:
|
|
|
|
```
|
|
<a href={{MyLinkDestination}}>link</a>
|
|
```
|
|
|
|
Here an attribute is specified as a macro invocation:
|
|
|
|
```
|
|
<a href=<<MyMacro "Brian">>>link</a>
|
|
```
|
|
|
|
! 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
|