Writing with MDX in Serene

Where an article begins

Writing does not need to begin with a perfect structure. Put down a complete sentence first, then let headings, lists and quotes find their places. MDX keeps the familiarity of Markdown while allowing a little controlled layout language when the page needs it11A sidenote is useful for a source, a small piece of context, or a thought that should not interrupt the main line..

Here is a regular link to Astro. It should feel like a quiet line on paper and reveal the accent color only when the reader points at it.

White space is not the absence of content; it is where the reader chooses to pause.

Structure and emphasis

Bold text is for words that genuinely need to be seen.
Inline code stays inside the sentence instead of breaking its rhythm.
A short list keeps related ideas together.

Give the idea a clear name.
Arrange the path into its details.
Remove decoration that carries no meaning.

Notes and decisions

Experimental content

This article only checks existing features. New syntax or behavior should be discussed before it becomes part of the theme.

Code has context too

The language label keeps code identifiable at rest; when the pointer enters, the copy action takes over that small control space.

const readingMode = {
  pace: 'unhurried',
  keepMargins: true
}

.article {
  max-width: var(--container-reading);
  margin-inline: auto;
}

npm run check
npm run build

After the draft

A test article can still be a readable article. It does not need to list every syntax feature; it only needs to let prose, hierarchy, code and notes share one page naturally.

Math in MDX

MDX uses the same inline syntax: $a^2 + b^2 = c^2$ .

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}