Markdown & MDC
Write docs with rich markdown and MDC custom components — alerts, callouts, steps, code groups, tabs. Rendered beautifully by default.
Standard Markdown
CodeThis supports the full CommonMark spec for standard markdown, including:
- Headings (
#,##,###) - Bold (
**text**), italic (*text*),strikethrough(~~text~~) - Lists — ordered and unordered, with nesting
- Blockquotes (
> text) - Inline code (
`code`) and fenced code blocks (```) - Links (
[label](url)) and images () - Tables (GFM-style
| col | col |) - Horizontal rules (
---)
Syntax Highlighting
Fenced code blocks get full syntax highlighting powered by Shiki — the same engine used by VS Code. Specify the language after the opening fence:
```typescript
function greet(name: string): string {
return `Hello, ${name}!`
}
```
Supported languages include TypeScript, JavaScript, Python, Rust, Go, Java, C/C++, SQL, YAML, JSON, Bash, and 100+ more.
MDC Components
CodeThis extends standard markdown with MDC (Markdown Components) — a syntax for embedding rich UI components directly in your paste. MDC blocks use double-colon notation:
::component-name{prop="value"}
Content goes here.
::
Inline MDC (for components without a body) uses single colons:
:badge[v2.0]{color="success"}
The 12 available components are documented below.
Alert
Displays a contextual alert banner. Use type to set the severity.
::alert{type="info"}
This is an informational note.
::
::alert{type="warning"}
Be careful — this action cannot be undone.
::
::alert{type="error"}
Something went wrong. Check your API key.
::
::alert{type="success"}
Your paste was published successfully.
::
Props:
| Prop | Type | Default | Values |
|---|---|---|---|
type | string | info | info, warning, error, success |
Callout
A subtle highlighted box for tips, notes, or supplementary information. Supports a custom icon.
::callout
**Tip:** You can set a filename as the paste title to enable language auto-detection.
::
::callout{icon="i-lucide-terminal"}
Run `pnpm dev` to start the development server.
::
Props:
| Prop | Type | Default |
|---|---|---|
icon | string | i-lucide-lightbulb |
Badge
An inline badge for labels, versions, or status indicators.
This feature is :badge[Pro]{color="warning"} only.
Released in :badge[v1.4.0]{color="success"}.
Props:
| Prop | Type | Default |
|---|---|---|
color | string | primary |
Card
A bordered card for grouping related content. Supports an optional title and icon.
::card{title="Quick Start" icon="i-lucide-rocket"}
Create your first paste at [codethis.dev/new](/new).
::
Props:
| Prop | Type | Default |
|---|---|---|
title | string | — |
icon | string | — |
Card Group
Lay out multiple cards in a responsive grid. Wrap ::card blocks inside ::card-group.
::card-group{cols="2"}
::card{title="API" icon="i-lucide-code"}
Use the REST API to create pastes programmatically.
::
::card{title="MCP" icon="i-lucide-bot"}
Use CodeThis directly from Claude Desktop or Claude Code.
::
::
Props:
| Prop | Type | Default | Values |
|---|---|---|---|
cols | string | 2 | 2, 3, 4 |
Code Group
Tabbed code blocks — perfect for showing the same snippet in multiple languages or showing a command alongside its output.
::code-group
```bash [npm]
npm install @codethis/mcp-server
```
```bash [pnpm]
pnpm add @codethis/mcp-server
```
```bash [yarn]
yarn add @codethis/mcp-server
```
::
The tab label comes from the language annotation after the language name in brackets: ```bash [pnpm].
Collapse
A collapsible section — useful for long examples, FAQs, or optional details.
::collapse{title="Show full response example"}
```json
{
"data": {
"id": "clx...",
"slug": "abc12345",
"url": "https://codethis.dev/doc/abc12345"
}
}
::
**Props:**
| Prop | Type | Default |
|---|---|---|
| `title` | string | `Details` |
---
## Steps
A numbered step-by-step guide. Each item in an ordered list becomes a numbered circle.
- Create an API key in Settings > API Keys.
- Copy your key — it starts with
ct_. - Add it to your environment:
export CODETHIS_API_KEY=ct_... - Run the MCP server:
npx @codethis/mcp-server
---
## Tabs
Generic tabbed content. Each child block gets a tab, labeled by its `title` prop.
Press Cmd + Space to open Spotlight.
Press Win + R to open Run.
Press Ctrl + Alt + T to open a terminal.
---
## File Tree
A monospaced directory tree — useful for showing project structure.
---
## Video
Embed a video with native browser controls.
**Props:**
| Prop | Type | Required |
|---|---|---|
| `src` | string | Yes |
| `title` | string | No |
---
## Kbd
Render keyboard shortcuts inline.
Press to save, or to publish.
---
## Combining Components
MDC components can be nested and combined freely. For example, a Steps block inside a Card:
Setup Guide
- Install the package.
- Set your API key.
- Test the connection.
::alert{type="info"}
The live preview in the editor renders all MDC components in real time — you'll see exactly what your published paste will look like.
::