Vue Syntax HighlighterVue 3 code highlighting that stays fast

Install ​

npm install vue-syntax-highlighter shiki

pnpm add vue-syntax-highlighter shiki

yarn add vue-syntax-highlighter shiki

bun add vue-syntax-highlighter shiki

Import the stylesheet once:

import 'vue-syntax-highlighter/styles.css'

Then render:

<script setup lang="ts">
import { SyntaxHighlighter } from 'vue-syntax-highlighter'

const code = 'const answer = 42'
</script>

<template>
  <SyntaxHighlighter :code="code" language="javascript" />
</template>

That is the whole zero-configuration path: Shiki is the default engine, vsh-light is the default theme, and no provider or plugin is required.

Read the Quick Start · Basic Usage · Advanced Usage

Try it ​

Semantic tokens, not engine-native styles ​

Coupling themes to engine output makes theme switches expensive and makes server rendering unpredictable. This library keeps tokenization independent from appearance:

// Engine output: text + semantic type only.
{ text: 'const', type: 'keyword' }

// Appearance: CSS custom properties selected by scheme.
// --vsh-light-token-keyword-color / --vsh-dark-token-keyword-color

That one decision makes the cache theme-independent, keeps SSR markup small, and lets every adapter share the same theme system.