Complete Markdown Formatting Guide

This article demonstrates all Markdown formatting effects supported by this theme.

First paragraph… (used for list preview)

Continued content…

Text Formatting

This is a regular paragraph. This is bold text, this is italic text, this is bold italic. You can also use strikethrough to mark deprecated content.

Inline code uses backticks: const hello = 'world', perfect for marking variable names or commands.

Blockquotes

The value of design goes beyond the completion of construction. Good design should stand the test of time, maintaining its unique charm and practicality through the years.

You can also use multi-paragraph quotes:

First quoted paragraph.

Second quoted paragraph, demonstrating multi-paragraph effect.

Source attribution (<cite> placed on the last line inside blockquote):

The value of design goes beyond the completion of construction.

— Dieter Rams

Pullquote (using blockquote.pullquote variant):

You hated those people so much, fought them for so long, and in the end you became just like them. No ideal in this world is worth such a fall. — One Hundred Years of Solitude

Callouts

Recommended syntax sugar (note / tip / info / warning):

:::note[Note]
This is supplementary or aside content, suitable for background or annotations.
:::

For direct HTML (more precise control):

<div class="callout note">
  <p class="callout-title" data-icon="none">Note</p>
  <p>This is supplementary or aside content, suitable for background or annotations.</p>
</div>

Notes:

• Default icons are determined by type, no <span class="callout-icon"> needed.
• Hide icons with data-icon="none", placed on .callout-title.
• Custom icons can use data-icon="✨" (optional).

Syntax Sugar Test Cases (Callout)

The following only shows syntax (without styles), for syntax sugar test cases:

Syntax Sugar Rendering Examples

:::note
Body text only, no title.
:::

:::note[Title]
This is a note with a title.
:::

:::tip[Checklist]
- Item one
- Item two
:::

:::info[Code]
```ts
const hello = 'world';
```
:::

:::warning[Caution]
> This is a quoted tip.
> It can also include a [link](https://astro.build).
:::

:::foo[Invalid Type]
Invalid type example.
:::

Invalid types are recommended to degrade to note (preserving title and content).

Lists

Unordered List

• First item
• Second item
  • Nested item A
  • Nested item B
• Third item

Ordered List

1. Preparation
2. Install dependencies
3. Run the project
   1. Development mode
   2. Production build

Task List

• Complete design mockup
• Develop homepage
• Write documentation
• Deploy to production

Code Blocks

The following code blocks demonstrate the toolbar (language/line count/copy button) and line numbers (enabled by default).

JavaScript

// A simple Astro component example
const greeting = 'Hello, World!';

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Python

def quick_sort(arr):
    """Quick sort algorithm implementation"""
    if len(arr) <= 1:
        return arr

    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]

    return quick_sort(left) + middle + quick_sort(right)

# Usage example
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quick_sort(numbers))

CSS

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

Shell

# Install dependencies and start dev server
npm install
npm run dev

# Build for production
npm run build

Tables

Links & Images

This is an external link that opens in a new tab.

Figure / Caption

Case A: img + figcaption

Case B: No figcaption

Case C: picture + figcaption (optional)

Note: Under the current styling, img and picture look identical. picture is mainly used to provide multiple “fallback versions” of the same image — the browser will automatically choose the most suitable one (e.g., smaller image for mobile, larger for desktop, or preferring WebP/AVIF). When auto-selection isn’t needed, just use img.

Gallery

Case: Two-image layout (with optional figcaption)

Horizontal Rule

Here is some content above.

Here is some content below.

Math & Special Characters

Common math symbols: π ≈ 3.14159, e ≈ 2.71828

Special characters: © 2026 · ™ · ® · € · £ · ¥ · → · ← · ↑ · ↓

English Paragraph

The best way to predict the future is to invent it. — Alan Kay

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Mixed Formatting

This is a paragraph containing bold, italic, code, and link mixed formatting. You can freely combine these elements in a single paragraph to create a rich reading experience.

These are all the Markdown formats supported by this theme. If you find any rendering issues, feel free to submit an Issue!