Skip to content

Configure Highlighter ​

Slidev uses Shiki as the code highlighter. It's a TextMate Grammar powered syntax highlighter as accurate as VS Code. It generates colored tokens so no additinal CSS is required. Shiki also comes with a bunch of built-in themes. In Slidev, we also provided the TwoSlash support.

Configure Shiki ​

Environment: both
This setup function will run on both Node.js and client side. Avoid using Node.js or DOM API to prevent runtime errors.

Create ./setup/shiki.ts file with the following content:

ts
/* ./setup/shiki.ts */
import { 
defineShikiSetup
} from '@slidev/types'
export default
defineShikiSetup
(() => {
return {
themes
: {
dark
: 'min-dark',
light
: 'min-light',
},
transformers
: [
// ... ], } })

If you want to add custom theme or language (TextMate grammar/themes in JSON), you can import them in the setup file:

ts
/* ./setup/shiki.ts */
import { 
defineShikiSetup
} from '@slidev/types'
import
customTheme
from './customTheme.tmTheme.json'
import
customLanguage
from './customLanguage.tmLanguage.json'
export default
defineShikiSetup
(() => {
return {
themes
: {
dark
:
customTheme
,
light
: 'min-light',
},
langs
: [
'js', 'typescript', 'cpp',
customLanguage
,
// ... ],
transformers
: [
// ... ], } })

Check Built-in languages and Built-in themes, and refer to Shiki's docs for more details.

INFO

For now, Shiki Magic Move does not support transformers.

Configure Prism ​

WARNING

Prism support has been removed since v0.50. Please use Shiki instead.

Released under the MIT License.