Markdown Typographic Guidelines

This article shows all the support for this theme Markdown Typesetting effect。

first paragraph……（for list preview）

Follow-up text……

text format

This is a normal text。This is bold text，This is italicized text，This is bold italic。You can also use strikethrough to mark content as obsolete。

Use backticks to wrap inline code：const hello = 'world'，Great for tagging variable names or commands。

Quote

The value of design goes beyond completion of construction。Good design should be able to withstand the test of time，It still maintains its unique charm and practicality over the years.。

You can also use multiple quotes：

First paragraph quote。

Second paragraph quote，Show multi-paragraph effect。

Source annotation（<cite> put on blockquote the last line in）：

The value of design goes beyond completion of construction。

— Dieter Rams

Pullquote（use blockquote.pullquote Variants）：

You hate those people so much，After fighting them for so long，In the end, he became like them。No ideal in the world is worth the price of such sinking。 — One Hundred Years of Solitude

prompt block（Callout）

support note / tip / info / warning Four kinds of syntactic sugar。Let’s first give a minimal way of writing；For more granular control，You can also write directly HTML。

:::note[title]
This is the text。
:::

If you need to write directly HTML（More precise control）：

<div class="callout note">
  <p class="callout-title" data-icon="none">title</p>
  <p>This is the text。</p>
</div>

Note:

• The default icon is determined by the type; a <span class="callout-icon"> is unnecessary.
• Use data-icon="none" to hide the icon; write it on .callout-title.
• Custom icons are supported via data-icon="✨" (optional).

Syntactic sugar variant example（Callout）

This set of examples mainly shows different types of、The actual style of the title form and content structure on the front end。

const hello = 'world';

The basic syntax is as follows：

:::type[Optional title]
Text content
:::

Only note / tip / info / warning are supported; unsupported types (e.g. :::foo[...]) are downgraded to note.

list

unordered list

• first item
• Second item
  • Nested items A
  • Nested items B
• The third item

ordered list

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

task list

• Complete design draft
• Development homepage
• Write documentation
• Publish online

code block

The following code block is used to display the toolbar（language/Number of lines/copy button）with line number（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 the development server
npm install
npm run dev

# Build production version
npm run build

sheet

Links and pictures

this is a external links，will open in a new tab。

Figure / Caption

Case A：img + figcaption

Case B: no figcaption

Case C：picture + figcaption（Optional）

Note: under the current styles, img and picture look consistent. picture is mainly used to provide multiple “alternate versions” of the same image, and the browser picks the most appropriate one (e.g. a phone thumbnail, a larger desktop image, or WebP/AVIF when supported). When automatic version selection is not needed, img is fine.

Gallery

Case：Two pictures layout（With optional figcaption）

dividing line

Above is some content。

Below is some more content。

Math and special characters

Commonly used mathematical 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 mixing bold, italics, code, and a link. You can freely combine these elements within a paragraph to create a rich reading experience.

The above is all supported by this theme Markdown Format。If you notice any rendering issues，Submissions are welcome Issue！