This supplement is a gallery that showcases the rich text capabilities of Mudlej.com. It serves as a quick way to visually check whether Markdown plugins, design tokens, and client runtimes still work together.

Reading Rhythm#

This section checks ordinary prose, headings, inline marks, lists, quotes, tables, and images.

Heading Rhythm#

Headings should create clear sections without overpowering nearby paragraphs.

Third-Level Heading#

Third-level headings are common in technical tutorials.

Fourth-Level Heading#

Fourth-level headings should still feel intentional.

Fifth-Level Heading#

Fifth-level headings are rare, but the style should not collapse.

Inline Formatting#

You can format inline text with these Markdown features:

• For bold text, use **bold text**.
• For italic text, use *italic text*.
• For bold italic text, use ***bold italic text***.
• For highlighted text, use ==highlighted text==.
• For underlined text, use ^^underlined text^^.
• For inline code, use inline code.
• For hyperlinked text, use [hyperlinked text](https://mudlej.com).
• For inline math $E = mc^2$, use $E = mc^2$.
• For a footnote reference ¹, use reference [^preview].
  • Define the footnote as [^preview]: This footnote ....
• For keyboard shortcuts Ctrl + Alt + Del, use ++ctrl+alt+del++.
• For abbreviations like HTML, use *[HTML]: HyperText Markup Language.

Lists#

Nested Lists#

Syntax:

- Item 1
  - Item 1.1 with `inline code`
  - Item 1.2 with **strong text**
- Item 2

Rendered as:

• Item 1
  • Item 1.1 with inline code
  • Item 1.2 with strong text
• Item 2

Numbered List#

Syntax:

1. Write content.
2. Preview the article.
    1. Check light mode.
    2. Check dark mode.
3. Ship the page.

Rendered as:

1. Write content.
2. Preview the article.
   1. Check light mode.
   2. Check dark mode.
3. Ship the page.

Checklist#

Syntax:

- [x] Render Markdown.
- [x] Render callouts.
- [ ] Review the final article visually.

Rendered as:

• Render Markdown.
• Render callouts.
• Review the final article visually.

Quotes#

Normal Quote#

Syntax:

> A blockquote should be calm, readable, and distinct from normal prose without
> becoming a heavy card.

Rendered as:

A blockquote should be calm, readable, and distinct from normal prose without becoming a heavy card.

Nested Quotes#

Syntax:

> Outer quote.
>
> > Nested quote.
>
> Back to the outer quote.

Rendered as:

Outer quote.

Nested quote.

Back to the outer quote.

Tables#

Syntax:

| Feature   | Syntax              | Rendered by     | Status |
|:----------|:--------------------|:----------------|:------:|
| Math      | `$...$` / `$$...$$` | KaTeX           |  Yes   |
| Callouts  | `> [!NOTE]`         | rehype-callouts |  Yes   |
| Code      | fenced blocks       | Expressive Code |  Yes   |
| Diagrams  | `mermaid` fences    | Mermaid         |  Yes   |

Rendered as:

Images#

Images should fit the article column and preserve alt text.

Syntax:

![Design Systems](/projects/mudlej-dotcom/motherboard.webp)

Rendered as:

Clicking the image should open it in full-screen mode with an X button to close it.

Rich Blocks#

This section checks the larger writing features that make an article feel like a technical document rather than plain Markdown.

Callouts#

Note#

Syntax:

> [!NOTE]
> Notes provide neutral supporting information.

Rendered as:

Tip With a Custom Title#

Syntax:

> [!TIP] Custom Tip Title
> Tips can use custom titles and inline Markdown like `code`.

Rendered as:

Warning#

Syntax:

> [!WARNING]
> Warnings should be visually distinct without becoming loud.

Rendered as:

Collapsible Important Callout#

Syntax:

> [!IMPORTANT]-
> Collapsible callouts should look clean when closed.

Rendered as:

Caution#

Syntax:

> [!CAUTION]
> Caution callouts should remain readable in both themes.

Rendered as:

Math#

Inline Math#

Syntax:

Inline math should sit naturally in prose: $E = mc^2$.

Rendered as:

Inline math should sit naturally in prose: $E = mc^2$.

Block Math#

Syntax:

Block math should align and breathe correctly:

$$
\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$

Rendered as:

Block math should align and breathe correctly:

Multi-Line Math#

Syntax:

Multi-line math should remain legible:

$$
\begin{aligned}
a^2 + b^2 &= c^2 \\
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0}
\end{aligned}
$$

Rendered as:

Multi-line math should remain legible:

Diagrams#

Flowchart#

Syntax:

```mermaid
graph TD
    markdown["Write Markdown"] --> astro["Astro build"]
    astro --> html["Static HTML"]
    html --> browser["Browser renders page"]
```

Rendered as:

graph TD
    markdown["Write Markdown"] --> astro["Astro build"]
    astro --> html["Static HTML"]
    html --> browser["Browser renders page"]

Sequence Diagram#

Syntax:

```mermaid
sequenceDiagram
    participant Maintainer
    participant Astro
    participant Browser
    Maintainer->>Astro: Commit article
    Astro->>Browser: Serve static page
    Browser->>Browser: Render Mermaid
```

Rendered as:

sequenceDiagram
    participant Maintainer
    participant Astro
    participant Browser
    Maintainer->>Astro: Commit article
    Astro->>Browser: Serve static page
    Browser->>Browser: Render Mermaid

Content Tabs#

Code Tabs#

Syntax:

::::tabs{variant="code"}
:::tab{title="JavaScript"}
```js frame="code"
const message = "Hello from JavaScript";
console.log(message);
```
:::

:::tab{title="Python"}
```py frame="code"
message = "Hello from Python"
print(message)
```
:::
::::

Rendered as:

const message = "Hello from JavaScript";
console.log(message);

message = "Hello from Python"
print(message)

Text Tabs#

Syntax:

::::tabs
:::tab{title="Short"}
Use short tabs for compact alternatives.
:::

:::tab{title="Detailed"}
Use detailed tabs when each option needs a sentence or two of explanation.
:::
::::

Rendered as:

Code Blocks#

This section keeps code examples short while still exercising the Expressive Code features used by technical articles.

Plain Highlighting#

Syntax:

```js
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));
```

Rendered as:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

Code Block With a Filename#

Syntax:

```css title="src/styles/prose.css"
.prose a {
  color: var(--sys-color-accent);
}
```

Rendered as:

.prose a {
  color: var(--sys-color-accent);
}

Terminal Commands#

Syntax:

```bash
pnpm install
pnpm run build
```

Rendered as:

pnpm install
pnpm run build

Line Highlights and Diffs#

Line Highlights#

Syntax:

```js {2-3}
const config = {
  theme: "system",
  tabs: true,
};
```

Rendered as:

const config = {
  theme: "system",
  tabs: true,
};

Diff Markers#

Syntax:

```js del={2} ins={3}
function add(a, b) {
  return a - b;
  return a + b;
}
```

Rendered as:

function add(a, b) {
  return a - b;
  return a + b;
}

Marks, Line Numbers, and Wrapping#

Marked Words and Regex#

Syntax:

```js "return" /name/
function greet(name) {
  return name;
}
```

Rendered as:

function greet(name) {
  return name;
}

Line Numbers#

Syntax:

```py showLineNumbers title="fib.py" {3-4}
def fib(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a
```

Rendered as:

1
def fib(n):
2
    a, b = 0, 1
3
    for _ in range(n):
4
        a, b = b, a + b
5
    return a

Wrapping#

Syntax:

```text wrap
This is a very long single line of output that should wrap inside the code block instead of breaking the layout.
```

Rendered as:

This is a very long single line of output that should wrap inside the code block instead of breaking the layout.

Edge Cases#

These examples are intentionally small, but they catch layout regressions that often appear late in article styling.

Arabic Text#

Syntax:

الكتابة العربية يجب أن تستخدم الخط العربي المناسب، وأن تبقى مقروءة داخل المقال حتى عندما يكون اتجاه الصفحة العام من اليسار إلى اليمين.

Rendered as:

الكتابة العربية يجب أن تستخدم الخط العربي المناسب، وأن تبقى مقروءة داخل المقال حتى عندما يكون اتجاه الصفحة العام من اليسار إلى اليمين.

Long Content#

Syntax:

Long inline code should wrap or scroll without breaking the layout:
`src/content/articles/really-long-directory-name/another-long-directory-name/article-with-a-long-slug.md`.

Long unbroken text should not force the page beyond the viewport width:
supercalifragilisticexpialidocious-supercalifragilisticexpialidocious-supercalifragilisticexpialidocious.

Rendered as:

Long inline code should wrap or scroll without breaking the layout: src/content/articles/really-long-directory-name/another-long-directory-name/article-with-a-long-slug.md.

Long unbroken text should not force the page beyond the viewport width: supercalifragilisticexpialidocious-supercalifragilisticexpialidocious-supercalifragilisticexpialidocious.