Plugins

Extend Comark with powerful plugins for syntax highlighting, emojis, table of contents, math equations, diagrams, and more.

Comark's plugin system extends markdown functionality with specialized features. All plugins are part of the core comark package.

Plugins

Alerts

Render GitHub-style alert blockquotes with icons and colors

Binding

Interpolate frontmatter, runtime data, or parent props with {{ path || default }} shorthand

Breaks

Convert soft line breaks directly into :br components

Emoji

Convert emoji shortcodes like :smile: into emoji characters

Footnotes

Plugin for adding footnote references and definitions to your Comark documents.

Headings

Plugin for extracting the page title and description from document content.

JSON Render

Transform JSON Render specs into UI components using json-render or yaml-render code blocks

Mathematics

Render LaTeX math formulas using KaTeX with inline and display equations

Mermaid Diagrams

Create diagrams and visualizations using Mermaid syntax in code blocks

Punctuation

Convert plain-text punctuation into typographically correct Unicode characters

Security

Sanitize markdown by removing dangerous HTML elements and attributes

Summary Extraction

Extract content summaries using  delimiter

Syntax Highlighting

Beautiful code syntax highlighting using Shiki with multi-theme support

Task List

Render interactive checkboxes from [ ] and [x] list syntax

Table of Contents

Generate hierarchical TOC from headings automatically

Guides

Plugin API

Define plugins with the ComarkPlugin interface and lifecycle hooks

AST API

Traverse and transform the ComarkTree AST using the visit() utility

Markdown-it Plugins

Use existing markdown-it plugins or create new parser syntax rules

Use Plugins

Pass plugins to parse() or the <Comark> component:

import { parse } from 'comark'
import emoji from 'comark/plugins/emoji'
import toc from 'comark/plugins/toc'

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

<script setup lang="ts">
import { Comark } from '@comark/vue'
import emoji from '@comark/vue/plugins/emoji'
</script>

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

import { Comark } from '@comark/react'
import emoji from '@comark/react/plugins/emoji'

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

<script>
  import { Comark } from '@comark/svelte'
  import emoji from '@comark/svelte/plugins/emoji'
  let content = '# Awesome'
</script>

<Comark markdown={content} plugins={[emoji()]} />

Edit this pageorReport an issue