Feature Showcase — Everything, Rendered

This page is a deliberate stress-test of the site’s renderer. Everything below is written as live markdown, not shown as source — so if a feature is working, you’ll see it working. A few spots are written as self-tests: read the surrounding prose and you’ll know instantly whether the feature passed.

How to read this page

If every block below looks intentional and styled, the build is healthy. Anything that shows raw syntax (literal ==, {{, [[, %%) instead of a rendered result is a feature that did not fire.

---

Text formatting (CommonMark)

Here is bold text, italic text, bold italic together, and strikethrough. Inline code spans should render in a monospace pill.

Self-test for escaping: this should show literal asterisks, not italics → *not italic*. And this should show a literal hash, not a heading → # not a heading.

A plain link and a link with a hover title — pause on the second to see the tooltip.

A horizontal rule comes next:

---

Headings

The big title at the very top of this page is the H1 (rendered from the title frontmatter). The section headers like “Headings” are H2. Levels three through six render live below and should each step down in size:

Heading level 3

Heading level 4

Heading level 5

Heading level 6

All of these also populate the table-of-contents sidebar — if the TOC lists them, heading parsing and the TOC component both work.

Blockquotes

This is a single blockquote.

And this is a blockquote nested inside it, which should sit one level deeper.

Lists

Unordered, with nesting:

• Top-level bullet
  • Indented two spaces to nest
    • And nested again
• Back to the top level

Ordered:

1. First
2. Second
3. Third

Task list (GFM) — the first should be an empty checkbox, the second a ticked one:

• Unchecked task
• Checked task

Custom task characters (OFM enableCheckbox) — each renders a distinct marker via a data-task attribute:

• [?] question
• [!] important
• [>] forwarded
• [/] in progress
• [-] cancelled
• [s] special

Tables (GFM)

Column alignment should follow the colons in the header divider — left, centered, right:

Feature	Status	Notes
Tables	works	GFM aligns
Task lists	works	GFM checkbox
Footnotes	works	see below
Wikilinks	works	OFM, below

Footnotes (GFM)

This sentence has a footnote reference.¹ Here’s a second one² further along. Both should appear as small superscript links that jump to the footnotes section at the very bottom of the page.

Autolinks (GFM)

A bare URL pasted into text should become clickable on its own: https://github.com/quartz-community

---

Code & syntax highlighting

These code fences are the feature — each language should be colorized differently:

def fibonacci(n: int) -> list[int]:
    seq = [0, 1]
    while len(seq) < n:
        seq.append(seq[-1] + seq[-2])
    return seq[:n]
 
print(fibonacci(10))

const greet = (name) => `Hello, ${name}!`;
[1, 2, 3].map((n) => n ** 2).forEach((x) => console.log(x));

git switch v5
npx quartz sync -m "publish showcase"   # commits, pushes, pulls

{
  "title": "Feature Showcase",
  "publish": true,
  "tags": ["showcase", "meta/test"]
}

Math (KaTeX)

Inline math should typeset cleanly in a sentence: the mass–energy relation is $E=m{c}^2$, and the area of a circle is $A=\pi r^2$.

Block math is centered on its own line:

$${\int }_0^{\infty }{e}^{-x}dx=1\sum _{k=1}^{n}k=\frac{n(n+1)}{2}$$

---

Wikilinks & internal references (OFM)

Same-page links are the most reliable test of link resolution. This should jump to the Callouts section, and this should jump back up to the Headings section.

This links to a specific labeled block elsewhere on the page → jump to the demo block.

Below is a labeled block you can target from anywhere. This very sentence is the block.

A link to another note uses the same syntax — Some Other Note — and an aliased version renders custom text: click here instead. If those target notes don’t exist yet, they’ll render in the unresolved-link style, which is itself a useful thing to confirm is styled.

Embed / transclusion (OFM)

Transclusion pulls another note’s content inline. Here it pulls in a section from this very page so the test is self-contained — the “Embed target” block below should appear duplicated right here:

Circular transclusion detected: feature-showcase

Embed target

If you can read this paragraph twice on the page — once above (transcluded) and once here in place — then ![[...]] embedding is working. The same syntax embeds whole notes, images (![[image.png]]), and videos from your vault.

---

Highlights, marks & colored text

The one theme-colored highlight: this text is highlighted with the theme highlight color.

For any other color, raw HTML passes straight through and renders in both Obsidian and Quartz:

A yellow highlight, a green highlight, and a soft translucent red (8-digit hex = alpha).

Colored text via span: this should be red and this should be teal.

Inline HTML niceties: underline, H₂O subscript, x² superscript, and a keyboard key Ctrl + S.

Hidden comments (OFM)

Comments are stripped from the output. Read this line carefully — you should see before and after with nothing between them:

before after

If those two words sit next to each other with no hidden text leaking through, comment-stripping works.

Tags

Inline tags become clickable links to tag pages: showcase, reference, and a nested one test. (Tags are lowercased and slugified, so #MyTag resolves to the same page as #mytag.)

---

Callouts

A standard note callout:

Note

This is a plain note callout with the default styling and icon.

Callouts come in many flavors, each with its own color and icon:

Tip

Helpful suggestion.

Warning

Proceed with caution.

Danger

Something risky.

Success

All good.

Question

An open question.

Quote

A quotation block.

Collapsible callouts — this one starts collapsed (click to open):

Collapsed by default

Hidden until you click the header. If you had to click to see this, collapsing works.

And this one starts expanded but can be collapsed:

Expanded by default

Visible now, with a collapse control. Custom titles work too, as the headers above show.

Mermaid diagrams

This fenced mermaid block should render as an actual flowchart, not as text — it maps this site’s own publish pipeline:

graph TD
    A[Write in Obsidian] --> B{Preview looks right?}
    B -->|Yes| C[git switch v5]
    C --> D[npx quartz sync]
    D --> E[Codeberg → GitHub mirror]
    E --> F[Cloudflare Pages build]
    F --> G[Live site]
    B -->|No| H[Keep editing]
    H --> B

Media embeds

An image-syntax embed of a YouTube URL should render as an embedded player, not a link (this is the Blender Foundation’s Creative Commons short Big Buck Bunny):

The same ![](url) syntax with an X/Twitter status URL renders that post as a static, linked blockquote.

---

Fancy text (custom fancy-text plugin)

These are site-specific and should animate — if they animate, the custom local plugin is loaded and its client script is re-running on navigation:

surfing the waves should ripple, over the rainbow should cycle colors, shaky text should jitter, and spinning around should rotate.

---

Frontmatter (the proof is at the top)

This page’s own frontmatter is a working demonstration: the title at the top, the description that appears in search and link previews, the tags rendered as a tag list, the aliases that let other notes link here by alternate names, and publish: true — the flag that let this page build at all under the site’s explicit-publish gate.

---

End of the test

If you scrolled this far and everything above looked deliberate — colored callouts, a flowchart, a video player, typeset math, animated fancy text, and no stray raw syntax — then the renderer is firing on all features.

Footnotes

1. This is the first footnote. It should appear here at the bottom of the page, with a back-link arrow returning you to where you were reading. ↩

2. This is the second footnote, defined with a named key (longnote) rather than a number — the rendered marker still appears in document order regardless of the key you chose. ↩