This page is a small rendering checklist. It deliberately includes the syntax I am most likely to use in future notes.

Headings and paragraphs

Heading level one

This is a normal paragraph with a manual line break
and a second line in the same paragraph.

Heading level three

Heading level four

Heading level five

Heading level six

Inline formatting

Here is italic text, bold text, bold italic text, and strikethrough text. You can also use inline code, escaped characters like *this*, and an HTML entity such as ©.

Keyboard shortcuts can use Ctrl + K. The custom link renderer opens an external link in a new tab and keeps an internal link inside the site.

Annotations

The built-in <Annotation> component supports the directions, colors, optional notes, and noMark option from the original CSS library. Each example has its own stage so the floating label has room to breathe.

• direction controls where the arrow points: n is up, s is down, e is right, w is left, and the two-letter values are diagonal directions.
• color sets the ink and highlight color. Available values are amber, blue, green, red, purple, and rainbow.
• note is the handwritten explanation next to the arrow. Leave it out when the target should only be highlighted.
• noMark keeps the arrow and note but removes the target's background highlight when the target already has its own styling.

Links and images

Autolink literals should work too: https://example.com and test@example.com.

Image caption: standard Markdown image syntax renders as an ordinary responsive image.

Reference-style links are supported: the project repository.

Bookmark cards and image rows

Only a pure angle-bracket URL becomes a bookmark card:

github.com/Tan35/quiet-notesOpen this link to view the referenced page.github.com/Tan35/quiet-notesG Barry Song | Barry song's Blog什么都会做一点的工程师。日常健身、写代码和设计、学习语言。www.4real.ltd

This normal Markdown link stays inline.

Images on one source line share a row; a new line starts the next row:

Blockquotes

Good interfaces make the next step feel obvious.

This is a nested blockquote.

— A tiny design principle

Lists

• Unordered list item
• Another item
  • Nested unordered item
  • Another nested item

1. Ordered list item
2. Another ordered item
   1. Nested ordered item
   2. Another nested item

Task list

• Render headings and paragraphs
• Render a table
• Add more examples later

Table

Feature	Syntax	Status
Emphasis	*text*	Ready
Links	[label](url)	Ready
Tables	pipes and dashes	Ready

Code blocks

A TypeScript code block should receive syntax highlighting:

type Theme = 'light' | 'dark'

function nextTheme(theme: Theme): Theme {
  return theme === 'dark' ? 'light' : 'dark'
}

A diff block is useful when documenting a change:

- const spacing = 'tight'
+ const spacing = 'comfortable'

Angle-bracket URLs inside code remain code, not bookmark cards:

<https://example.com>

Details and other inline MDX

Click to reveal a native HTML details block

This content is hidden until the summary is opened.

This details block starts open

The open attribute is preserved by MDX.

Footnotes

Footnotes are useful for small asides or sources.¹ They stay out of the main paragraph flow.²

---

The horizontal rule above separates the checklist from this closing note.

Reference

1. This is the first footnote. ↩

2. This is the second footnote with a link. ↩