---
title: "Plugins"
description: "Extend Comark with plugins for syntax highlighting, emoji, table of contents, math, and diagrams, or reuse existing markdown-it plugins."
canonical_url: "https://comark.dev/plugins"
---
# Plugins

> Extend Comark with plugins for syntax highlighting, emoji, table of contents, math, and diagrams, or reuse existing markdown-it plugins.

Comark has two compatible extension layers. Comark plugins can transform source, tokens, the parsed document, or rendered output through typed lifecycle hooks. You can also reuse parser plugins written for markdown-it through Comark's markdown-exit foundation.

All Comark plugins are part of the core `comark` package, while optional rendering dependencies are installed only when you use them.

## Default plugins

These plugins are **enabled by default** whenever you call `parseMarkdown()` or `createMarkdownParser()` (or a framework `<Markdown>` component). You do not need to install or register them.

::card-group{cols="2"}
  :::card{icon="i-lucide-file-spreadsheet" title="Frontmatter" to="https://comark.dev/plugins/defaults/frontmatter"}
  Parse a leading YAML frontmatter block into `tree.frontmatter`
  :::

  :::card{icon="i-lucide-code-xml" title="HTML" to="https://comark.dev/plugins/defaults/html"}
  Parse embedded HTML tags into Comark AST nodes
  :::

  :::card{icon="i-lucide-bell" title="Alerts" to="https://comark.dev/plugins/defaults/alert"}
  Transform GitHub-style `> [!NOTE]` blockquotes
  :::

  :::card{icon="i-lucide-check-square" title="Task List" to="https://comark.dev/plugins/defaults/task-list"}
  Interactive `[ ]` / `[x]` checkboxes
  :::

  :::card{icon="i-lucide-component" title="Components" to="https://comark.dev/plugins/defaults/components"}
  Block/inline components and spans (`::name`, `:name`, `[text]`)
  :::

  :::card{icon="i-lucide-tag" title="Attributes" to="https://comark.dev/plugins/defaults/attributes"}
  Inline attributes (`{props}` after tokens)
  :::
::

::callout{icon="i-lucide-lightbulb"}
Default plugins run in the order shown above. Plugins you pass through `plugins` run afterward in the order you provide them. If an explicit plugin has the same `name` as a default plugin, it replaces that default and runs in its explicit position. If you provide the same explicit plugin name more than once, only the first instance runs.
::

### Disable default plugins

Turn them all off with `registerDefaultPlugins: false`:

```typescript
import { parseMarkdown } from 'comark'

// Plain markdown only — no components, attributes, HTML, alerts, or task lists
const result = await parseMarkdown(content, {
  registerDefaultPlugins: false,
})
```

Opt back into specific defaults via `plugins`:

```typescript
import { parseMarkdown } from 'comark'
import components from 'comark/plugins/components'
import attributes from 'comark/plugins/attributes'

const result = await parseMarkdown(content, {
  registerDefaultPlugins: false,
  plugins: [components(), attributes()],
})
```

See the [`registerDefaultPlugins` and `plugins` options](https://comark.dev/reference/parse#options) on the Parse API.

## Plugins

Optional plugins you register via `plugins: [...]`.

::card-group{cols="2"}
  :::card{icon="i-lucide-replace" title="Binding" to="https://comark.dev/plugins/built-in/binding"}
  Interpolate frontmatter, runtime data, or parent props with `{{ path || default }}` shorthand
  :::

  :::card{icon="i-lucide-corner-down-left" title="Breaks" to="https://comark.dev/plugins/built-in/breaks"}
  Convert soft line breaks directly into `:br` components
  :::

  :::card{icon="i-lucide-smile" title="Emoji" to="https://comark.dev/plugins/built-in/emoji"}
  Convert emoji shortcodes like `:smile:` into emoji characters
  :::

  :::card{icon="i-lucide-footprints" title="Footnotes" to="https://comark.dev/plugins/built-in/footnotes"}
  Plugin for adding footnote references and definitions to your Comark documents.
  :::

  :::card{icon="i-lucide-heading" title="Headings" to="https://comark.dev/plugins/built-in/headings"}
  Plugin for extracting the page title and description from document content.
  :::

  :::card{icon="i-lucide-braces" title="JSON Render" to="https://comark.dev/plugins/built-in/json-render"}
  Transform JSON Render specs into UI components using `json-render` or `yaml-render` code blocks
  :::

  :::card{icon="i-lucide-calculator" title="Mathematics" to="https://comark.dev/plugins/built-in/math"}
  Render LaTeX math formulas using KaTeX with inline and display equations
  :::

  :::card{icon="i-simple-icons-mermaid" title="Mermaid Diagrams" to="https://comark.dev/plugins/built-in/mermaid"}
  Create diagrams and visualizations using Mermaid syntax in code blocks
  :::

  :::card{icon="i-lucide-quote" title="Punctuation" to="https://comark.dev/plugins/built-in/punctuation"}
  Convert plain-text punctuation into typographically correct Unicode characters
  :::

  :::card{icon="i-lucide-shield-check" title="Security" to="https://comark.dev/plugins/built-in/security"}
  Sanitize markdown by removing dangerous HTML elements and attributes
  :::

  :::card{icon="i-lucide-file-text" title="Summary Extraction" to="https://comark.dev/plugins/built-in/summary"}
  Extract content summaries using `<!-- more -->` delimiter
  :::

  :::card{icon="i-lucide-code" title="Shiki" to="https://comark.dev/plugins/built-in/shiki"}
  Beautiful code syntax highlighting using Shiki with multi-theme support
  :::

  :::card{icon="i-lucide-zap" title="Rangi" to="https://comark.dev/plugins/built-in/rangi"}
  Lightweight highlighting via rangi (\~13kB all-in, dual themes)
  :::

  :::card{icon="i-lucide-list" title="Table of Contents" to="https://comark.dev/plugins/built-in/toc"}
  Generate hierarchical TOC from headings automatically
  :::
::

## Guides

::card-group{cols="2"}
  :::card{icon="i-lucide-wrench" title="Plugin API" to="https://comark.dev/plugins/custom/plugin-api"}
  Define plugins with the ComarkPlugin interface and lifecycle hooks
  :::

  :::card{icon="i-lucide-git-branch" title="AST API" to="https://comark.dev/plugins/custom/ast-api"}
  Traverse and transform the MarkdownDocument AST using the visit() utility
  :::

  :::card{icon="i-simple-icons-markdown" title="Markdown-it Plugins" to="https://comark.dev/plugins/custom/markdown-it"}
  Use existing markdown-it plugins or create new parser syntax rules
  :::
::

## Use plugins

Pass plugins to `parseMarkdown()` or the `<Markdown>` component:

::code-group
```typescript [Parse API]
import { parseMarkdown } from 'comark'
import emoji from 'comark/plugins/emoji'
import toc from 'comark/plugins/toc'

const result = await parseMarkdown(content, {
  plugins: [
    emoji(),
    toc({ depth: 3 })
  ]
})
```

```vue [Vue]
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import emoji from '@comark/vue/plugins/emoji'
</script>

<template>
  <Markdown :plugins="[emoji()]">{{ content }}</Markdown>
</template>
```

```tsx [React]
import { Markdown } from '@comark/react'
import emoji from '@comark/react/plugins/emoji'

<Markdown plugins={[emoji()]}>{content}</Markdown>
```

```svelte [Svelte]
<script>
  import { Markdown } from '@comark/svelte'
  import emoji from '@comark/svelte/plugins/emoji'
  let content = '# Awesome'
</script>

<Markdown value={content} plugins={[emoji()]} />
```
::


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.