Markdown & MDC

Standard Markdown

CodeThis supports the full CommonMark spec, 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 (![alt](url))
• Tables (GFM-style | col | col |)
• Horizontal rules (---)

Syntax Highlighting

Fenced code blocks get full syntax highlighting powered by Shiki — the same engine VS Code uses. Specify the language after the opening fence:

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`
}
```

Renders as:

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 — each with the syntax and a live preview of how it renders.

Alert

Contextual alert banner. Use type to set the severity.

::alert{type="info"}
This is an informational note.
::

Renders as:

Props

Callout

A subtle highlighted box for tips, notes, or supplementary information. Supports a custom Lucide icon.

::callout{icon="i-lucide-terminal"}
Run `pnpm dev` to start the development server.
::

Renders as:

Props

Badge

Inline badge for labels, versions, or status indicators. Inline MDC syntax — wrap the label in [...].

This feature is :badge[Pro]{color="warning"} only. Released in :badge[v1.4.0]{color="success"}.

Renders as:

This feature is Pro only. Released in v1.4.0.

Props

Card

Bordered card for grouping related content. Supports an optional title and Lucide icon.

::card{title="Quick Start" icon="i-lucide-rocket"}
Create your first paste at [codethis.dev/new](/new).
::

Renders as:

Props

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.
  ::
::

Renders as:

Props

Code Group

Tabbed code blocks — perfect for showing the same snippet across multiple package managers or languages. The tab label comes from the bracketed annotation after the language: ```bash [pnpm].

::code-group
```bash [npm]
npm install @codethis/mcp-server
```
```bash [pnpm]
pnpm add @codethis/mcp-server
```
```bash [yarn]
yarn add @codethis/mcp-server
```
::

Renders as:

npm install @codethis/mcp-server

pnpm add @codethis/mcp-server

yarn add @codethis/mcp-server

Collapse

Click-to-expand 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"
  }
}
```
::

Renders as:

{
  "data": {
    "id": "clx...",
    "slug": "abc12345",
    "url": "https://codethis.dev/doc/abc12345"
  }
}

Props

Steps

Numbered step-by-step guide. Each item in the ordered list inside becomes a numbered circle.

::steps
1. Create an API key in **Settings → API Keys**.
2. Copy your key — it starts with `ct_`.
3. Add it to your environment: `export CODETHIS_API_KEY=ct_...`
4. Run the MCP server: `npx @codethis/mcp-server`
::

Renders as:

Tabs

Generic tabbed content. Each child block becomes a tab, labeled by its title prop. Note the triple-colon :::tab for nested children.

::tabs
  :::tab{title="macOS"}
  Press `Cmd + Space` to open Spotlight.
  :::
  :::tab{title="Windows"}
  Press `Win + R` to open Run.
  :::
  :::tab{title="Linux"}
  Press `Ctrl + Alt + T` to open a terminal.
  :::
::

Renders as:

File Tree

Monospaced directory tree — useful for showing project structure. Built from a nested unordered list inside the block.

::file-tree
- src/
  - components/
    - Button.vue
    - Modal.vue
  - pages/
    - index.vue
  - app.vue
- nuxt.config.ts
- package.json
::

Renders as:

Video

Embed a video with native browser controls.

::video{src="https://example.com/demo.mp4" title="CodeThis demo"}
::

Props

Kbd

Render keyboard shortcuts inline.

Press :kbd[Ctrl + S] to save, or :kbd[Cmd + Enter] to publish.

Renders as:

Press to save, or to publish.

Combining Components

MDC components nest freely. A Steps block inside a Card:

::card{title="Setup Guide" icon="i-lucide-settings"}
  ::steps
  1. Install the package.
  2. Set your API key.
  3. Test the connection.
  ::
::

Renders as: