Testing Special Markdown

Tets Quote

Normal Quote

Math Quote

Card Testing

Music Card

Github Card

Special Syntax

Blur Effect

Here is a blur effect.

On desktop, hovering removes the blur, and clicking keeps it clear for 3 seconds. On mobile, clicking removes the blur, but it only becomes blurry again after 3 seconds have passed since the click and the page has been scrolled.

Pinyin

Below words will show pinyin:

拼pīn音yīn，君きみの名なは

Rainbow Text

This is an rainbow text effect.

Nested Effect

The above styles can be nested, such as:

Do you like the movie 君きみの名なは

Link Jump

Content links open in the current tab by default. Put an attribute block {target="_blank"} immediately after a link to open it in a new tab, with a small arrow icon appended after the link text:

Welcome to Motues' [Blog](https://motues.top){target="_blank"}!

Result:

Welcome to Motues’ Blog⁠!

Only target, rel and class are recognised inside the attribute block; anything else makes the whole block stay in the text as-is. rel always keeps noopener and noreferrer. Links holding only an image get no icon, so the arrow never sits on top of the image:

[![Cover](./cover.jpg)](https://motues.top "Click to enlarge"){target="_blank"}

It works for in-site pages too, e.g. [Markdown Basics](/en/blog/markdown){target="_blank"}.

Footnotes

This is a sentence in the article; I need to add a superscript reference ¹ here.

This is another sentence that cites a different source ².

Typst Testing

Typst rendering based on Typst.ts.

Images may not display optimally in dark mode.

Alert Component Testing

Single-Line Content Testing

Multi-Line Content Testing

Nested Content Testing

console.log(‘Hello World’);

Custom Header Test

Expressive Code Testing

Code blocks are rendered by Expressive Code; append the options after the language (see the Markdown Basics article for the full list):

```js title="src/app.js" {3} ins={4} del={5} showLineNumbers
function greet(name) {
  // Highlights line 3
  console.log(`Hello, ${name}!`)
  return true // Added
  return false // Removed
}
```

Result:

1
function greet(name) {
2
  // Highlights line 3
3
  console.log(`Hello, ${name}!`)
4
  return true // Added
5
  return false // Removed
6
}

Terminal Frame and Collapsed Lines

frame="terminal" shows a terminal window (three dots), collapse={3-6} folds the given lines, and clicking the collapsed-lines summary expands them:

pnpm install
pnpm build
4 collapsed lines
# The lines below are collapsed
echo "hello"
echo "world"
echo "again"
echo "more"

Word Wrap and No Title Bar

wrap wraps long lines and frame="none" hides the title bar:

The universe is a dark forest. Every civilization is an armed hunter stalking through the trees like a ghost, trying to tread without sound.