docusaurus-preset-shiki-twoslash

Docusaurus Preset Shiki Twoslash

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.

Setup

1. Install the dependency: yarn add docusaurus-preset-shiki-twoslash

2. Include "docusaurus-preset-shiki-twoslash" in the presets section of docusaurus.config.js

     presets: [
    [
      '@docusaurus/preset-classic',
      {
        // ...
      },
    ],
    + ["docusaurus-preset-shiki-twoslash", { theme: "github-light" }]
   ],
   
   

3. Add the CSS from npmjs.com/package/remark-shiki-twoslash to src/css/custom.css

4. Disable the in-built formatter: src/theme/MDXComponents/index.js:

import InitialComponents from '@theme-init/MDXComponents';

const newExport = {}
// Remove `pre` and `code` from the MDX parser because Shiki Twoslash will handle them
Object.entries(InitialComponents).forEach(key => {
  if (key !== "pre" && key !== "code") newExport[key] = InitialComponents[key]
})

export default newExport

1. Go read npmjs.com/package/remark-shiki-twoslash to see what is available, this package leaves all the heavy work to that module.