Lists in WikiText

7th June 2016 at 9:31am

Bulleted Lists

You can create bulleted (unordered) lists with * characters ():

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

That renders as:

First list item
Second list item
- A subitem
Third list item

... and the underlying HTML is:

<ul><li>First list item</li><li>Second list item<ul><li>A subitem</li></ul></li><li>Third list item</li></ul>

Numbered Lists

Numbered (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

That renders as:

To do today
1. Eat
To get someone else to do
1. This
2. That
  1. And the other

... and the underlying HTML is:

<ul><li>To do today<ol><li>Eat</li></ol></li><li>To get someone else to do<ol><li>This</li><li>That<ol><li>And the other</li></ol></li></ol></li></ul>

Here's an example the other way around, with numbers as the first level:

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

That renders as:

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

... and the underlying HTML is:

<ol><li>To do today<ul><li>Eat</li></ul></li><li>To get someone else to do<ul><li>This</li><li>That<ul><li>And the other</li></ul></li></ul></li></ol>

CSS Classes

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

* List One
*.tc-muted List Two
* List Three

That renders as:

List One
List Two
List Three

... and the underlying HTML is:

<ul><li>List One</li><li class="tc-muted">List Two</li><li>List Three</li></ul>

Mixing Lists and Block Quotes

Note that Block Quotes in WikiText can be mixed with lists. For example:

* List One
** List Two
**> A quote
**> Another quote
* List Three

That renders as:

List One
- List Two
  A quote
  Another quote
List Three

... and the underlying HTML is:

<ul><li>List One<ul><li>List Two<blockquote><div>A quote</div><div>Another quote</div></blockquote></li></ul></li><li>List Three</li></ul>

Paragraphs in Lists

Entries in the list are delimited with a linebreak, making it impossible to include linebreaks within a list entry. There are a couple of workarounds.

First, you can transclude paragraph content from another tiddler. For example:

* First entry
* <$transclude tiddler="MyTiddler" mode="block"/>
* Third entry

Secondly, you can use an HTML "div" element to contain the multiline content. For example:

# Step 1
# Step 2
# Step 3<div>

Here is the first of several paragraphs. Note that the double linebreak preceding this paragraph is significant.

And here is the second of several paragraphs.
</div>
# Step 4
# Step 5
# Step 6