Block Quotes in WikiText

12th May 2024 at 12:09am

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>

Citation

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

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>

Single-line Block Quotes

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:

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>

Advanced Wikitext and Block Quotes

You can also mix block quotes with paragraphs and other block wikitext. Be mindful of block mode - if other quoted content follows a paragraph, end it with a blank line. The final paragraph in the quote does not need to end with a blank line. If using indentation, make sure not to indent the blank lines. The parser will interpret this as additional inline content and not return to block mode. For example:

<<< Mixing Block Quotes with Inline Wikitext
A paragraph appears before other //wikitext//, which needs to end with a blank line.

    * List One
    ** List Two
    **> A quote
"""
A poem
with line beaks
needs to have
a blank line after
the final quotes
if followed
by other content
"""

    <<<< Deep Block Quote
        A paragraph before other //wikitext//, which ends with a blank line.

        ! A Header
        Another paragraph, which needs to end with a blank line.

            !! Sub Header
            A final paragraph, which __does not__ need to end with a blank line as the Block Quote ends.
    <<<<
<<<

That renders as:

Mixing Block Quotes with Inline Wikitext
A paragraph appears before other wikitext, which needs to end with a blank line.
List One
List Two
A quote
A poem
with line beaks
needs to have
a blank line after
the final quotes
if followed
by other content
Deep Block Quote
A paragraph before other wikitext, which ends with a blank line.
A Header
Another paragraph, which needs to end with a blank line.
Sub Header
A final paragraph, which does not need to end with a blank line as the Block Quote ends.

... and the underlying HTML is:

<blockquote class="tc-quote"><cite>Mixing Block Quotes with Inline Wikitext</cite><p>A paragraph appears before other <em>wikitext</em>, which needs to end with a blank line.</p><ul><li>List One<ul><li>List Two<blockquote><div>A quote</div></blockquote></li></ul></li></ul><p>A poem<br>with line beaks<br>needs to have<br>a blank line after<br>the final quotes<br>if followed<br>by other content<br></p><blockquote class="tc-quote"><cite>Deep Block Quote</cite><p>A paragraph before other <em>wikitext</em>, which ends with a blank line.</p><h1 class="">A Header</h1><p>Another paragraph, which needs to end with a blank line.</p><h2 class="">Sub Header</h2><p>A final paragraph, which <u>does not</u> need to end with a blank line as the Block Quote ends.
</p><blockquote class="tc-quote"><blockquote class="tc-quote"></blockquote></blockquote></blockquote></blockquote>