DocExplorer

shiki

https://shiki.matsu.io/guide/install
/

Monaco Editor Integration | Shiki

ID: 1750•https://shiki.matsu.io/packages/monaco
Source

Monaco Editor Integration

Shiki uses the same TextMate grammar and themes as VS Code, so it can be used to highlight Monaco Editor.
The package @shikijs/monaco provides an official integration, and you can also use the modern‑monaco package that includes built‑in Shiki integration.

@shikijs/monaco

NPM version NPM downloads GitHub

Use Shiki to highlight Monaco Editor.

Monaco’s built‑in highlighter does not use the full TextMate grammar, which in some cases is not accurate enough.
This package allows you to use Shiki’s syntax‑highlighting engine to highlight Monaco, with shared grammars and themes from Shiki.

Heavily inspired by monaco-editor-textmate.

Install

# npm
npm i -D @shikijs/monaco

# yarn
yarn add -D @shikijs/monaco

# pnpm
pnpm add -D @shikijs/monaco

# bun
bun add -D @shikijs/monaco

# deno
deno add npm:@shikijs/monaco

Usage

import { shikiToMonaco } from '@shikijs/monaco';
import * as monaco from 'monaco-editor-core';
import { createHighlighter } from 'shiki';

// 1. Create the highlighter (can be reused)
const highlighter = await createHighlighter({
  themes: ['vitesse-dark', 'vitesse-light'],
  langs: ['javascript', 'typescript', 'vue'],
});

// 2. Register language IDs (only registered languages will be highlighted)
monaco.languages.register({ id: 'vue' });
monaco.languages.register({ id: 'typescript' });
monaco.languages.register({ id: 'javascript' });

// 3. Register the themes from Shiki and provide syntax highlighting for Monaco
shikiToMonaco(highlighter, monaco);

// 4. Create the editor
const editor = monaco.editor.create(document.getElementById('container'), {
  value: 'const a = 1',
  language: 'javascript',
  theme: 'vitesse-dark',
});

modern-monaco

NPM version NPM downloads GitHub

We highly recommend using modern-monaco that includes built‑in Shiki integration. It provides a more convenient API for building Monaco Editor.

Install

# npm
npm i -D modern-monaco

# yarn
yarn add -D modern-monaco

# pnpm
pnpm add -D modern-monaco

# bun
bun add -D modern-monaco

# deno
deno add npm:modern-monaco

Or import it from the CDN in the browser without a build step:

import * as monaco from 'https://esm.sh/modern-monaco';

Usage

index.html

<!-- index.html -->
<monaco-editor theme="vitesse-dark"></monaco-editor>
<script src="app.js" type="module"></script>

app.js

import { lazy, Workspace } from 'modern-monaco';

// create a workspace with initial files
const workspace = new Workspace({
  initialFiles: {
    'index.html': `<html><body>...</body></html>`,
    'main.js': `console.log('Hello, world!')`,
  },
  entryFile: 'index.html',
});

// initialize the editor lazily
await lazy({ workspace });

// write a file and open it in the editor
workspace.fs.writeFile(
  'util.js',
  `export function add(a, b) { return a + b; }`
);
workspace.openTextDocument('util.js');

More usage examples can be found in the modern‑monaco repository.