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>
.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
Direct imports: Import themes and languages from @shikijs/themes and @shikijs/langs for type safety and 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 @shikijs/themes @shikijs/langs

2. Import Themes and Languages

Import directly from @shikijs/themes and @shikijs/langs:

import highlight from 'comark/plugins/highlight'
import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'
import javascript from '@shikijs/langs/javascript'
import typescript from '@shikijs/langs/typescript'
import python from '@shikijs/langs/python'

3. Configure the Plugin

Pass the imported themes and languages to the plugin:

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

4. Use Code Blocks in Markdown

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

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

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

Why Import Directly?

✅ Type Safety: TypeScript autocomplete for themes and languages
✅ Tree Shaking: Only bundle the themes/languages you use
✅ No Typos: Import errors caught at build time
✅ Smaller Bundle: Import only what you need

Configuration Options

import type { BundledLanguage, BundledTheme } from 'shiki'

interface HighlightOptions {
  // Theme configuration - import from @shikijs/themes
  themes?: Record<string, BundledTheme>

  // Languages to include - import from @shikijs/langs
  languages?: BundledLanguage[]

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

Available Themes

Import themes from @shikijs/themes:

import githubLight from '@shikijs/themes/github-light'
import githubDark from '@shikijs/themes/github-dark'
import materialLight from '@shikijs/themes/material-theme-lighter'
import materialDark from '@shikijs/themes/material-theme-palenight'
import nord from '@shikijs/themes/nord'
import oneDarkPro from '@shikijs/themes/one-dark-pro'
import dracula from '@shikijs/themes/dracula'
import monokai from '@shikijs/themes/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

Math formulas

Example showing how to use Comark with LaTeX math formulas in Vue and Vite.