Block Quotes in WikiText

17th April 2017 at 4:51pm

There are two ways to produce HTML block quotes in TiddlyWiki5, one for content spread across multiple lines, and one for single line content.

Multi-line Block Quotes

The syntax for multi-line block quotes () is:

<<<
This is a block quoted paragraph
written in English
<<<

That renders as:

This is a block quoted paragraph written in English

... and the underlying HTML is:

<blockquote class="tc-quote"><p>This is a block quoted paragraph
written in English
</p></blockquote>

A citation can be added to the quote like this:

<<<
Computers are like a bicycle for our minds
<<< Steve Jobs

That renders as:

Computers are like a bicycle for our minds
Steve Jobs

... and the underlying HTML is:

<blockquote class="tc-quote"><p>Computers are like a bicycle for our minds
</p><cite>Steve Jobs</cite></blockquote>

CSS classes can be added to a block quote:

<<<.myClass.another-class
Operating systems are like a brick wall for our minds
<<< Nobody

That renders as:

Operating systems are like a brick wall for our minds
Nobody

... and the underlying HTML is:

<blockquote class="tc-quote myClass another-class"><p>Operating systems are like a brick wall for our minds
</p><cite>Nobody</cite></blockquote>

The core includes the class tc-big-quote that renders block quotes with outsize double quotes:

<<<.tc-big-quote
A dramatic quote
<<< Somebody Important

That renders as:

A dramatic quote
Somebody Important

... and the underlying HTML is:

<blockquote class="tc-quote tc-big-quote"><p>A dramatic quote
</p><cite>Somebody Important</cite></blockquote>

The single-line syntax for block quotes is actually an extension of the syntax for Lists in WikiText. For example:

> Quoted text
> Another line of quoted text

That renders as:

Quoted text
Another line of quoted text

... and the underlying HTML is:

<blockquote><div>Quoted text</div><div>Another line of quoted text</div></blockquote>

You can also nest quotes like this:

> A top quote
>> A subquote
> Another top quote

Which renders as:

A top quote
A subquote
Another top quote

You can also mix block quotes with other list items. For example:

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

That renders as:

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