Complete Markdown Typography Guide

Published: 2026-01-15 · #Guide

This article demonstrates all Markdown typography features supported by this theme.

First paragraph… (used for list preview)

Subsequent content…

Text Formatting

This is a normal 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 extends beyond 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 effects.

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

The value of design extends beyond construction.

— Dieter Rams

Pullquote (using the blockquote.pullquote variant):

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

Callouts

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

Markdown
UTF-8|3 Lines|
:::note[Note]
This is supplementary information or aside content, suitable for background notes or annotations.
:::

For direct HTML (more precise control):

HTML
UTF-8|4 Lines|
<div class="callout note">
  <p class="callout-title" data-icon="none">Note</p>
  <p>This is supplementary information or aside content, suitable for background notes or annotations.</p>
</div>

Notes:

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

Callout Syntax Test Cases

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

Callout Rendering Examples

A Quick Tip

Here is the body text…

Text
UTF-8|3 Lines|
:::note
Body only, no title.
:::
Text
UTF-8|3 Lines|
:::note[Title]
This is a note with a title.
:::
Text
UTF-8|4 Lines|
:::tip[Checklist]
- Item one
- Item two
:::
Text
UTF-8|5 Lines|
:::info[Code]
```ts
const hello = 'world';
```
:::
Text
UTF-8|4 Lines|
:::warning[Caution]
> This is a quoted tip.
> It can also contain a [link](https://astro.build).
:::
Text
UTF-8|3 Lines|
:::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
  • Publish and go live

Code Blocks

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

JavaScript

JavaScript
UTF-8|9 Lines|
// 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

Python
UTF-8|15 Lines|
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

CSS
UTF-8|8 Lines|
.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

Bash
UTF-8|6 Lines|
# Install dependencies and start the dev server
npm install
npm run dev

# Build for production
npm run build

Tables

FeatureStatusDescription
Responsive layout✅Perfect mobile adaptation
Dark mode🚧In development
RSS feed✅Supports multiple feeds
Internationalization❌Planned

Links & Images

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

Figure / Caption

Case A: img + figcaption

Figure caption example image 1
Figure caption example: This is the image description text.

Case B: No figcaption

No caption example

Case C: picture + figcaption (optional)

Figure caption example image 2
Figure caption example: Description text for picture element.

Note: Under the current styles, img and picture look identical. picture is mainly used to provide multiple “fallback versions” of the same image — the browser will automatically pick the most suitable one (e.g., smaller images for mobile, larger for desktop, or preferring WebP/AVIF). When you don’t need automatic version selection, just use img.

Case: Two-image layout (with optional figcaption)

  • Gallery example 1
    First image caption (optional)
  • Gallery example 2
    Second image caption (optional)

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 Typography

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

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