TR-20231222 // PUBLIC RELEASE

MDX Refresher 🍹

Released by: Prayag Bhakar
Series: Refreshers 🍹
Release date: 2023-12-22
Revised: 2026-07-28add LaTeX + Mermaid + transclusion samples
2026-07-27rewrite the samples to be self descriptive
Length: 919 words · 5 min · grade 6
Subjects: #mdx #refresher

This page holds Markdown and Markdown JSX (MDX) features supported on this blog.

1 Headings

<h1> belongs to the post title. <h2>, <h3>, and <h4> are titles with copy-link anchors. Deeper levels render bold and unnumbered. A page that needs an <h5> wants to be two pages.

1.1 Heading level three

Section numbers count from the top of the article, so this one reads 1.1.

1.1.1 Heading level four

The number grows a third part here, and the type stops shrinking.

Heading level five

Now it's bold and unnumbered.

Heading level six

Here is as deep as the syntax goes.

2 Paragraphs

The first paragraph after a heading sits flush. Every paragraph after it indents by three characters, the way a printed book marks a new thought. Vertical space counts in whole lines, so the gaps grow with the type.

3 Thematic breaks

Three dashes draw a hairline rule with a leaf mark centered on it.

4 Images

An open test bench holding a large graphics card and a power supply on a metal frame, beside a small black desktop case

Images run the full width of the text column. That photo comes from a build post, where an open mining rack sits next to a small desktop case for scale.

5 Blockquotes

A quote block holds words from another source. Mark the speaker with a cite element on the last line, and keep the source link in a footnote.

5.1 Quote without attribution

A quote block with no speaker line. Markdown keeps working inside it, and so does bold text.

5.2 Quote with attribution

Don't communicate by sharing memory, share memory by communicating.
Rob Pike¹

6 Tables

Tables need a header row. Columns stretch to fit the widest cell.

Element	Written as	Renders as
Italic	`_italic_`	italic
Bold	`bold`	bold
Code	`code`	`code`

7 Code blocks

A fenced block opens and closes with three backticks. Name the language after the opening fence to highlight the syntax, such as html, ts, or bash.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

8 Math

LaTeX helps write math expressions that can be pre-rendered at build. A pair of dollar signs sets inline math, $\cos(\pi d / 2W)$ . Escape a dollar sign as \$ to print the symbol itself, for example $10.

Two dollar signs on their own lines set a displayed equation, centered on its own block. \tag hangs a label on an equation to reference it in text.

\text{scale} = 1 + \frac{H - h}{2 \sin(\pi h / 4W)} \times \frac{\sin(\pi d_2 / 2W) - \sin(\pi d_1 / 2W)}{d_2 - d_1} \tag{math:01}

For example, math:01 is the Mac OS X Cheetah Dock magnification: a slot of size $h$ grows toward $H$ as it nears the focus, $W$ sets how far the effect reaches, and $d_1$ to $d_2$ is the slot's own span.

Rows inside \begin{aligned} line up on their &, which splits the amplitude out of the same formula as seen in math:02.

\begin{aligned} P(\text{no failure}) &= \prod_{i=1}^{n} (1 - p_i) \\ &\approx 1 - \sum_{i=1}^{n} p_i \quad \text{for small } p_i \end{aligned} \tag{math:02}

A math codeblock also achieves the same effect. Not all math blocks need to have \tag.

\text{size} = \text{min} + \frac{1 - \cos\theta}{2} \times (\text{max} - \text{min})

9 Diagrams

A mermaid codeblock draws a diagram at build. It inks itself from the text around it, so one drawing serves both themes. Six kinds render, and anything else fails the build. The build measures labels for a proportional face, so keep them short in this monospace one, or break a long label with <br/>.

9.1 Flowchart

Nodes and the arrows between them. graph LR runs left to right, TD runs top down. Square brackets draw a box, braces a diamond, and text between pipes rides the edge.

9.2 State

A machine and the events that move it, where [*] marks where it starts.

9.3 Sequence

9.4 Class

The shape of a type: a name, its fields, and its methods in a compartment below them, where + marks a public member.

9.5 Entity relationship

The same content read as records rather than types, saying how many of each. A crow's foot means many, a double bar exactly one, and a dotted line marks a link neither side needs to exist for. PK tags the key that identifies a row.

9.6 X-Y chart

Numbers over axes, drawn with line or bar. Plotted here is math:01 itself: the Cheetah magnification across a hundred units of track, focused at fifty, reaching a quarter of the track either side. It peaks at 1.37 directly under the focus, and slots out past the reach settle near 0.82 instead of 1. The warp wants to grow, fitted back onto a track that can't.

10 Transclusion

![[slug#anchor]] alone on a line pulls a section out of another post and sets it here as a quote, attributed to where it came from.

As you collect Dockerfiles, a Compose file makes orchestrating them easier.

version: '3.9'

services:
  notebook:
    image: jupyter/minimal-notebook
    container_name: jupyter
    hostname: jupyter
    restart: always
    networks: 
      - tunnel
    ports:
      - "90:8888"
    volumes:
      - jupyter_data:/home/jupyter
    runtime: nvidia
    user: root
    command: "start-notebook.sh"
    environment:
      NB_USER: jupyter
      NB_UID: 1000
      NB_GID: 1000
      CHOWN_HOME: 'yes'
      CHOWN_HOME_OPTS: -R
      NVIDIA_VISIBLE_DEVICES: 'all'

volumes: 
  jupyter_data:

networks:
  tunnel:
    driver: bridge

docker-refresher § docker-compose

11 Lists

11.1 Ordered list

First item
Second item
Third item

11.2 Unordered list

List item
Another item
And another item

11.3 Nested list

Fruit
- Apple
- Orange
- Pear
Dairy
- Milk
- Cheese

11.4 Task list

Completed task
Incomplete task

12 Inline elements

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

Most salamanders hunt at night.

12.1 Footnotes

A sentence can cite a source at its last word.²

12.2 Callouts

Note

A note callout carries a fact the reader needs.

Tip

A tip callout carries advice the reader can skip.

Important

An important callout carries a fact with consequences.

Warning

A warning callout flags a risk to the reader's data.

Caution

A caution callout flags a step that's hard to undo.

Footnotes

from Rob Pike's Go Proverbs talk, 2015-11-18. ↩
the note text lands at the end of the article, with a link back to the marker. ↩

TR-20231222 // PUBLIC RELEASE

distribution per CC BY 4.0

Backlinks

NO_INBOUND_LINKS
[ORPHAN_NODE // AWAITING_UPLINK]