BoosAPI/desktop/libs/stream-monaco/examples/shiki-sync

Example: Monaco + Shiki theme sync

This minimal example shows how to keep Monaco editor themes and standalone Shiki-rendered code snippets in sync.

Goal

• Register (or pre-register) themes and languages for both Monaco and Shiki.
• Optionally reuse the returned Shiki highlighter from registerMonacoThemes for rendering HTML snippets.

Files

• A simple Vue component (see snippet below) that:
  • calls registerMonacoThemes to preload themes & languages,
  • creates an editor and uses a preloaded Shiki highlighter for manual preview rendering,
  • switches theme via setTheme and also renders a Shiki HTML snippet using the returned highlighter.

Quick steps

1. Create a new Vite + Vue project (or use the existing examples/streaming-demo as base).
2. Install package dependencies (you need vue, monaco-editor, shiki, and this library locally or from npm).
3. Add the component below and run the dev server.

Running the example

• From the repository root (recommended with pnpm workspaces):

pnpm install
pnpm --filter ./examples/shiki-sync dev

• Or inside the example directory:

cd examples/shiki-sync
pnpm install
pnpm dev

Retry behavior

• The example UI shows a small "Retry" button if loading themes fails (e.g. network or build issue). Click it to re-attempt preloading themes & languages.

Vue component (single-file component)

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { registerMonacoThemes, useMonaco } from 'stream-monaco'

const container = ref<HTMLElement | null>(null)
const preview = ref<HTMLDivElement | null>(null)

const allThemes = ['vitesse-dark', 'vitesse-light']
const allLanguages = ['javascript']

// preload themes & languages and get a shiki highlighter
let shikiHighlighter: any = null
onMounted(async () => {
  shikiHighlighter = await registerMonacoThemes(allThemes, allLanguages)
})

const { createEditor, setTheme } = useMonaco({
  themes: allThemes,
  languages: allLanguages,
})

onMounted(async () => {
  if (container.value) {
    await createEditor(container.value, 'console.log("hello world")', 'javascript')
  }
})

function applyShikiRender(themeName: string) {
  if (!shikiHighlighter || !preview.value)
    return
  try {
    const html = shikiHighlighter.codeToHtml('console.log("hello world")', { lang: 'javascript', theme: themeName })
    preview.value.innerHTML = html
  }
  catch (e) {
    // fallback: highlighter may not support codeToHtml in some builds; try setTheme instead
    try {
      shikiHighlighter.setTheme(themeName)
      // user should re-render their snippets accordingly
    }
    catch { }
  }
}

function switchToDark() {
  setTheme('vitesse-dark')
  applyShikiRender('vitesse-dark')
}

function switchToLight() {
  setTheme('vitesse-light')
  applyShikiRender('vitesse-light')
}
</script>

<template>
  <div>
    <div class="controls">
      <button @click="switchToDark">
        Dark
      </button>
      <button @click="switchToLight">
        Light
      </button>
    </div>

    <div ref="container" style="height:300px;border:1px solid #ddd;margin-top:12px" />

    <h3>Shiki preview</h3>
    <div ref="preview" />
  </div>
</template>

<style scoped>
.controls { display:flex; gap:8px }
</style>

Notes

• registerMonacoThemes now returns the Shiki highlighter Promise — you can reuse it to render static snippets or to call setTheme on the highlighter directly. If you need to keep standalone Shiki-rendered snippets in sync when changing the editor theme, call registerMonacoThemes(...) to obtain the Shiki highlighter and then call its setTheme(...) / codeToHtml(...) methods yourself. The example demonstrates preloading and manual usage.
• If you preload a full set of themes & languages at app start, the library will reuse the same highlighter instance and avoid re-creating it on theme changes.

Troubleshooting

• If Shiki's codeToHtml isn't exposed on the highlighter build you use (some builds differ), you can still call setTheme on the highlighter and re-run your own rendering pipeline.
• For large numbers of themes/languages, consider on-demand loading to reduce startup cost: preload the common ones and lazily call registerMonacoThemes for others.