Syntax Highlighting

Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.

App.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { content } from './content'
import { Comark } from '@comark/vue'
import highlight from '@comark/vue/plugins/highlight'

// Import themes and languages directly
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'
import python from '@shikijs/langs/python'
import rust from '@shikijs/langs/rust'
import go from '@shikijs/langs/go'
import sql from '@shikijs/langs/sql'
import css from '@shikijs/langs/css'

// Theme toggle
const isDark = ref(false)

onMounted(() => {
  isDark.value = document.body.classList.contains('dark')
})

function toggleTheme() {
  isDark.value = !isDark.value
  document.body.classList.toggle('dark', isDark.value)
}
</script>

<template>
  <div>
    <button
      class="theme-toggle"
      @click="toggleTheme"
    >
      {{ isDark ? '☀️ Light' : '🌙 Dark' }}
    </button>

    <Suspense>
      <Comark
        :plugins="[
          highlight({
            themes: {
              light: githubLight,
              dark: githubDark,
            },
            languages: [python, rust, go, sql, css],
          }),
        ]"
      >
        {{ content }}
      </Comark>
    </Suspense>
  </div>
</template>

<style>
.shiki .line {
  display: block;
}
.shiki .line:empty {
  height: 1lh;
}
.shiki .line.highlight {
  background-color: rgba(255, 255, 0, 0.1);
  display: block;
  margin: 0 -1rem;
  padding: 0 1rem;
}
.dark .shiki span {
  color: var(--shiki-dark) !important;
}
</style>

Features

This example demonstrates how to use Comark with syntax highlighting in Vue:

Dual-theme support: Automatically switches between light and dark themes
180+ languages: Supports JavaScript, TypeScript, Python, Rust, Go, SQL, and many more
Beautiful highlighting: Uses Shiki for high-quality syntax highlighting
Bundled theme names: Pass theme names as strings, or import theme/language objects for tree-shaking
Theme toggle: Switch between light and dark modes with a button
preStyles option: Optionally add background/foreground colors to <pre> elements

Usage

1. Install Dependencies

npm install shiki

2. Configure the Plugin

Pass bundled theme names as strings — no extra imports needed. Optionally preload languages from @shikijs/langs:

<script setup lang="ts">
import { Comark } from '@comark/vue'
import highlight from 'comark/plugins/highlight'
import javascript from '@shikijs/langs/javascript'
import typescript from '@shikijs/langs/typescript'
import python from '@shikijs/langs/python'
</script>

<template>
  <Suspense>
    <Comark
      :plugins="[
        highlight({
          themes: {
            light: 'github-light',
            dark: 'github-dark'
          },
          languages: [javascript, typescript, python]
        })
      ]"
    >
      {{ content }}
    </Comark>
  </Suspense>
</template>

You can also import theme registration objects from @shikijs/themes when you want explicit tree-shaking control.

3. Use Code Blocks in Markdown

```javascript
console.log("Hello, World!")
```

```typescript
const greeting: string = "Hello, TypeScript!"
```

```python
print("Hello, Python!")
```

Configuration Options

import type { BundledTheme, LanguageRegistration, ThemeRegistrationAny } from 'shiki'

interface HighlightOptions {
  // Theme names (e.g. 'github-light') or registration objects
  themes?: {
    light?: ThemeRegistrationAny | BundledTheme
    dark?: ThemeRegistrationAny | BundledTheme
  }

  // Languages to preload - import from @shikijs/langs
  languages?: LanguageRegistration[]

  // Add inline styles to <pre> elements
  preStyles?: boolean
}

Available Themes

Pass any bundled theme name as a string:

highlight({
  themes: {
    light: 'github-light',
    dark: 'github-dark'
    // also: 'nord', 'one-dark-pro', 'dracula', 'monokai', ...
  }
})

View all available themes →

Available Languages

Import languages from @shikijs/langs:

// Web
import javascript from '@shikijs/langs/javascript'
import typescript from '@shikijs/langs/typescript'
import vue from '@shikijs/langs/vue'
import tsx from '@shikijs/langs/tsx'

// Backend
import python from '@shikijs/langs/python'
import rust from '@shikijs/langs/rust'
import go from '@shikijs/langs/go'

// Data
import json from '@shikijs/langs/json'
import sql from '@shikijs/langs/sql'

// Shell
import bash from '@shikijs/langs/bash'

View all 180+ languages →

Learn More

Binding (frontmatter + data)

Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.

JSON Render

Example showing how to use Comark with JSON Render and YAML Render in Vue and Vite.