gatsby-remark-shiki-twoslash

gatsby-remark-shiki-twoslash

Sets up markdown code blocks to run through shiki which means it gets the VS Code quality syntax highlighting. This part is basically the same as gatsby-remark-shiki.

This module adds opt-in @typescript/twoslash rendering for TypeScript code blocks.

It's what powers the code samples on the TypeScript website.

With a bit of work you can explain complicated code in a way that lets people introspect at their own pace.

Plugin Setup

1. Install the dependency: yarn add --dev gatsby-remark-shiki-twoslash

2. Include "gatsby-remark-shiki-twoslash" in the plugins section of gatsby-transformer-remark

   {
     resolve: `gatsby-transformer-remark`,
     options: {
       plugins: [
         "gatsby-remark-autolink-headers",
   +      "gatsby-remark-shiki-twoslash",
         "gatsby-remark-copy-linked-files",
         "gatsby-remark-smartypants",
       ],
     },
   }
   

3. Add the CSS

4. Add the HTML + JS for hover info