CodeHighlight

CodeHighlight is a code highlighting component based on Shiki, a beautiful and powerful syntax highlighter built on TextMate grammar and themes. It uses the same syntax highlighting engine as VS Code, providing precise and fast syntax highlighting for almost all major programming languages.

Core Features

• Based on Shiki: Uses Shiki as the underlying highlighting engine, supporting TextMate grammar. The generated HTML is nearly identical to VS Code.
• High Performance: Optimized loading strategy, supporting on-demand loading of languages and themes.

Basic Usage

Use the content property to pass in a code string, and the language property to specify the programming language.

Slot - Custom Header

Supports slot definitions. When customizing the header, you need to handle theme color adaptation yourself.

Show Line Numbers

Individual Theme Configuration

TIP

Default supported languages: javascript, typescript, vue, html, css, json, bash, shell, yaml, markdown, python, java, go, sql, rust, mermaid, c,c++,c#

Props

Property	Type	Required	Default	Description
content	string	Yes	—	Code content to highlight
language	string	No	—	Code language
theme	string	No	light	Highlight theme, defaults support light, dark
extendLanguages	BundledLanguage[]	No	[]	Additional languages to load, see Shiki Languages
extendThemes	BundledTheme[]	No	[]	Additional themes to load, see Shiki Themes
showLineNumbers	Boolean	No	false	Controls whether to show line numbers

Slots

Slot Name	Description	Slot Parameters
header	Custom header content	content: Code content language: Language isCopied: Copy status, 1s interval before next copy onCopy: Copy code function toggleExpanded: Fold code

Ref

Method Name	Description	Parameters
onCopy	Copy code	-
toggleExpanded	Fold code	-