Table of Contents

1. Basic Markdown Capabilities
2. Lists, Tasks, and Footnotes
3. Tables and Code Highlighting
4. GitHub-style Alerts
5. KaTeX Formulas
6. Mermaid Diagrams
7. Duckquill Shortcodes
8. HTML Extension Capabilities
9. Buttons and Quick Navigation
10. Page-level Front Matter Features
11. Backlinks Demo

This post is the demo blog page of this site, used to centralize and verify rich-text and extended formatting capabilities.

Basic Markdown Capabilities

Text styles: bold, italic, strikethrough, inline code, and even combined style all together.

• Internal link: Home
• External link: Zola Documentation
• Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊

This is a quote block.

Here is a nested quote:

Duckquill is great for clear and structured technical writing.

Lists, Tasks, and Footnotes

• Normal list item A
• Normal list item B
  • Nested item B.1
  • Nested item B.2
• Normal list item C

1. Write content
2. Preview locally
3. Publish

• Task 1: Enable common Markdown extensions
• Task 2: Add Mermaid support
• Task 3: Refactor into a showcase post
• Task 4: Keep adding practical real-world examples

Footnote example¹ and linked footnote².

Definition List example:

Mermaid

Describe graph structures with text, then render them into SVG automatically.

KaTeX

High-performance rendering for LaTeX math formulas.

Duckquill Shortcodes

Theme-level feature extensions, such as alert, image, video, and youtube.

Tables and Code Highlighting

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

GitHub-style Alerts

This is a NOTE alert used to provide background context.

This is a TIP alert used for practical suggestions.

This is an IMPORTANT alert used to emphasize critical steps.

This is a WARNING alert used to call out potential issues.

This is a CAUTION alert used to describe risky behavior.

KaTeX Formulas

Inline formula: $E = mc^2$.

Block formula:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Mermaid Diagrams

The following mermaid block is rendered as a flowchart:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

Another sequence diagram example:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Duckquill Shortcodes

alert shortcode (different from GitHub alerts; this is theme shortcode):

This is a note shortcode alert.

This is a tip shortcode alert.

This is an important shortcode alert.

This is a warning shortcode alert.

This is a caution shortcode alert.

Image shortcode (basic usage):

Image shortcode (more options):

This text demonstrates the start floating image behavior, where the image sticks to the start side of the paragraph.

This text demonstrates the end floating image behavior, where the image sticks to the end side of the paragraph.

Video shortcode (basic and autoplay examples):

YouTube / Vimeo / Mastodon shortcode links:

• YouTube example link
• Vimeo example link
• Mastodon example link

(Note: to avoid noisy console output from third-party embeds in this showcase, these are shown as links.)

CRT shortcode:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

HTML Extension Capabilities

Common inline HTML tags also work directly:

• ASCII
• Ctrl + K
• highlighted key text
• this is a spoiler text
• this is a solid spoiler text
• old plan new plan
• this is an inline quotation
• demo-output.log: all checks passed
• this sentence is underlined

This is a <small> side note text example.

Form and interaction widget examples:

•  Enable Mermaid
•  Enable KaTeX
•  Enable Backlinks
•  Dark
•  Light

Accent color:

Content density:

Image + caption composition (figure + figcaption):

Progress bar example (linked with the range input through page script):

Buttons and Quick Navigation

Page-level Front Matter Features

Besides featured = true, this page also demonstrates:

• banner = "banner-feature-en.png": post banner and list thumbnail.
• accent_color / accent_color_dark: page-level accent override.
• styles = ["css/feature-demo-blog.css"] and scripts = ["js/feature-demo-blog.js"]: page-scoped styles and scripts.
• emoji_favicon = "🧪": emoji favicon for the browser tab.

This section is a compact checklist for validating page-level config rendering.

Backlinks Demo

I have added a link to this post from the about page.

If a Backlinks item appears in the quick-action buttons, the internal backlink index is working as expected.

If all modules above render correctly, it means the blog’s rich-text capability now covers most common writing scenarios.