gatsby-remark-shiki-twoslash

A remark plugin for Gatsby which adds twoslash code samples for TypeScript

Usage no npm install needed!

<script type="module">
  import gatsbyRemarkShikiTwoslash from 'https://cdn.skypack.dev/gatsby-remark-shiki-twoslash';
</script>

README

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.

Plugin Setup

Setup

  1. Install the dependency: yarn add 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",
+       {
+         resolve: "gatsby-remark-shiki-twoslash",
+         options: {
+            theme: "nord",
+         }
+       },
      "gatsby-remark-copy-linked-files",
      "gatsby-remark-smartypants",
    ],
  },
}

    If you have gatsby-remark-prismjs in, delete it from the config and run yarn remove gatsby-remark-prismjs.

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