Sandbox is a page meant for testing new functionalities and features of ryppl.net. This includes Github Flavoured Markdown features, HTML elements, and custom features (or modifications) made to existing and/or new plugins, or style changes.


Inline Formatting

Headers

ToC stops at Header3

Header4 — more granular than h3

Header5 — header with same font size as body text
Header6 — not used

Body Text

Vibrant zephyrs jostled quirky foxes beneath luminous skylights; meanwhile, cryptic glyphs danced across obsidian tablets, hinting at forgotten realms. Puzzling ellipses‒and em dashes—sparked debate among scholars, while velvet-draped windows framed abstract murals of neon moons. Unexpectedly, a cascade of semicolons; colons: and commas… “Eureka!”

Éléphant, résumé, façade, naïveté, über, fiancée, São, açaí, jalapeño, Niño, Zürich, bläu, piñón, rôle, crêpe, déjà, voilà, tête-à-tête, année, brûlée

Italics Bold Bold italics StrikethroughCode Internal Link External Link superscript subscript

Anchor

Italics Bold Bold italics Strikethrough Code Internal Link External Link superscript subscript

Italics Bold Bold italics Strikethrough Code Internal Link External Link superscript subscript

Italics Bold Bold italics Strikethrough Code Internal Link External Link superscript subscript

Italics Bold Bold italics Strikethrough Code Internal Link External Link superscript subscript

Italics Bold Bold italics Strikethrough Code Internal Link External Link superscript subscript

Numbers and Symbols

3.1415926, -273.15℃, 37%, (1+√5)/2, 80:20, 24/7

@ # $ % ^ & * ( ) _ + = { } [ ] | \ : ; ” ’ < > , . ? / ~ ` • ← → ↑ ↓ © ® ™ ± § ° ∑ ∞ ≈ ≠ √ ∂ λ Ω ♠ ♥ ♦ ♣ ∞

Math (Katex)

Inline

Display Mode

Code Spans

Vibrant zephyrs jostled quirky foxes beneath luminous skylights; meanwhile, cryptic glyphs danced across obsidian tablets, hinting at forgotten realms. Puzzling ellipses‒and em dashes—sparked debate among scholars, while velvet-draped windows framed abstract murals of neon moons. Unexpectedly, a cascade of semicolons; colons: and commas... “Eureka!”

1 2 3 42 5 6 7 8 9 0

Images

Using the default Markdown syntax, one is unable to specify the width, height, position or filters used for the image.

Bridge over a Pond of Water Lilies by Claude Monet

Filters, Size Adjustments and Centering

Using HTML syntax, image parameters and layout can be adjusted. For example, text and images can be displayed in a single row. However, this layout breaks while viewing in a mobile format. For more information about CSS filters, see here.

The Trolley Problem

Will You Fight? Or Will You Perish Like A Dog?

Dividers

The first custom divider is the four-pointed star. The second and third are eight- and twelve-pointed stars, respectively:




Blocks

Container Blocks

Lists

Numbered Lists

  1. Non-indented numbered lists follow a strict numbering that overrides custom values.
    2. They can only be indented once, and can begin from any number. See “4.”
  2. Even though it displays as “2.”, the actual number written for this line was “3.”
    4. The displayed value matches the actual value, “4.”
  3. Even though it displays as “3.”, the actual number written for this line was “5.”

Bullet Lists

If you leave an empty line between numbered lines or bullets, they will be spaced out. Otherwise, they will be compacted.

  • いち
    • さん
      • よん

Here is another example,

Blockquotes

See anchor above.

Admonitions

Quote

Liberty plucks Justice by the nose, the baby beats the nurse, and quite athwart goes all decorum.
—Shakespeare, Measure for Measure Act I, Sc. iii

Reminder

But is Wigner’s friend dead or alive?

Callouts

Column

Not a red rose or a satin heart.

Column

I give you an onion.

Column

It is a moon wrapped in brown paper.

Column

It promises light
like the careful undressing of love.

Column

Another demonstration of bullet points compacted

  • Three blind mice, three blind mice,
  • See how they run!

or distributed:

  • They all run after the farmer’s wife,

  • And she cut off their tails with a carving knife,

Column

And a demonstration for numbered lists:

  1. “One.”
  2. “Two.”
  3. “Three.”

“Just pitch up your voice.”

  1. One.

  2. Two.

  3. Three.

Leaf Blocks

Code

No syntax highlighting

quartz build --serve

Syntax highlighting

print('helloworld')

Tables

IndexNameItem Description
1CenterRight aligned
2
3

Footnotes

1. This is a footnote.

2. This is also footnote.