Code Highlighting
Overview
The theme's built-in code highlighting plugin provides syntax highlighting for code blocks.
Related plugin: @vuepress/plugin-shiki
The theme uses Shiki to implement syntax highlighting with colored text in Markdown code blocks. Shiki supports multiple programming languages.
You can find the list of supported languages in Shiki's repository.
Features
- Code Block Titles
- Line Highlighting
- Code Focus
- Code Diff
- Error and Warning Highlighting
- Word Highlighting
- Code Block Folding
- twoslash: Provides inline type hints within code blocks.
Configuration
Default configuration:
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
codeHighlighter: {
themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
notationDiff: true,
notationErrorLevel: true,
notationFocus: true,
notationHighlight: true,
notationWordHighlight: true,
highlightLines: true,
collapsedLines: false,
lineNumbers: true,
},
// Can also be configured via plugins.shiki, but not recommended
plugins: {
shiki: {}
}
}),
})themes
- Type:
{ light: string, dark: string } - Default:
{ light: 'vitesse-light', dark: 'vitesse-dark' }
Code highlighting themes supporting light/dark dual themes.
You can choose your preferred themes from the list of supported themes.
langs
- Type:
string[] - Default:
[]
Programming languages to be highlighted, such as javascript, typescript, python, java, c++, c#, etc. By default, languages are automatically detected based on code block language identifiers.
You can find the list of supported languages in Shiki's repository.
defaultLang
- Type:
string - Default:
text
Fallback language to use when the specified language is not available.
lineNumbers
- Type:
boolean | number - Default:
true
Whether to display line numbers.
true: Display line numbersfalse: Hide line numbersnumber: Minimum number of lines required to display line numbers.
twoslash
- Type:
boolean | ShikiTwoslashOptions - Default:
false
Whether to enable type hint support for typescript and vue languages.
whitespace
- Type:
boolean | 'all' | 'boundary' | 'trailing' - Default:
false
Render whitespace characters (tabs and spaces) as separate spans (with tab or space class names).
Effect:
<catalog>
<book>
<title>Everyday Italian</title>
</book>
</catalog>collapsedLines
- Type:
boolean | number - Default:
false
Collapse code blocks to the specified number of lines.
transformers
- Type:
ShikiTransformer[] - Default:
[]
Code transformers. Refer to shiki transformers for more information.
