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:
| Component | Purpose | Variants |
|---|---|---|
Callout | Highlight important info | info, warning, danger, success |
Steps | Numbered walkthroughs | - |
CodeBlock | Code with filename header | any language |