Writing with MDX: a feature tour

Posts are written in MDX: Markdown with the option to use components. This page tours the features, so you can copy what you need.

Text and lists

You can use bold, italic, inline code and links. Task lists and tables come from GitHub-flavoured Markdown.

Add a title, line numbers and highlighted lines right after the opening backticks.

greet.ts

export function greet(name: string) {
  const message = `Hello, ${name}!`;
  return message;
}

Mark lines with a comment: [!code ++], [!code --], [!code highlight] or [!code focus].

diff.ts

const total = items.length; 
const total = items.filter(Boolean).length; 
console.log(total);

Shell languages get a terminal frame automatically.

Run it locally

npm install
npm run dev

Inline math looks like $E = mc^2$ , and display math gets its own line:

\text{emissions} = \text{activity} \times \text{emission factor}

Put images in public/ and reference them with a normal Markdown image. Give a post a cover image with the image field in its frontmatter.