Writing Articles

This guide covers the Markdown and MDX syntax you'll use to write technical articles. Everything here renders natively - no build steps, no plugins to configure.

Markdown Basics

Standard Markdown works out of the box. Headings, lists, emphasis, links, and images all render with consistent styling.

example.md
# Heading 1
## Heading 2
### Heading 3

**Bold text** and *italic text* and `inline code`

- Bullet list item
- Another item

1. Numbered list
2. Second item

[Link text](https://example.com)

MDX Components

MDX lets you embed React components directly in your Markdown. This template ships with several ready to use:

Callouts

Use callouts to highlight important information, warnings, or tips.

Danger

Use the danger variant for irreversible actions or security-critical warnings.

article.mdx
import { Callout } from '../components/Callout.astro';

<Callout type="warning" title="Heads up">
  This is a warning callout.
</Callout>

Code Blocks

Fenced code blocks get automatic syntax highlighting. Add a filename to show a header with a copy button:

src/index.ts
interface Article {
  title: string;
  description: string;
  pubDate: Date;
  tags: string[];
}

const article: Article = {
  title: 'Getting Started',
  description: 'A quick guide',
  pubDate: new Date(),
  tags: ['docs', 'mdx'],
};

Tables

Markdown tables render with clean, readable styling:

ComponentPurposeVariants
CalloutHighlight important infoinfo, warning, danger, success
StepsNumbered walkthroughs-
CodeBlockCode with filename headerany language