Sets up markdown code blocks to run through shiki which means it gets the VS Code quality syntax highlighting mixed with the twoslash JavaScript tooling from the TypeScript website.
-
Install the dependency:
yarn add docusaurus-preset-shiki-twoslash
-
Include
"docusaurus-preset-shiki-twoslash"
in the presets section ofdocusaurus.config.js
presets: [ [ '@docusaurus/preset-classic', { // ... }, ], + [ + 'docusaurus-preset-shiki-twoslash', + { + themes: ["min-light", "nord"], + }, + ], ],
-
Set up light/dark mode CSS in
src/css/custom.css
:
[data-theme="light"] .shiki.nord {
display: none;
}
[data-theme="dark"] .shiki.min-light {
display: none;
}
- Go read npmjs.com/package/remark-shiki-twoslash to see what is available, this package leaves all the heavy work to that module.