gatsby-remark-shiki-twoslash
v3.0.38
Published
A remark plugin for Gatsby which adds twoslash code samples for TypeScript
Downloads
835
Keywords
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
Install the dependency:
yarn add gatsby-remark-shiki-twoslash
Include
"gatsby-remark-shiki-twoslash"
in the plugins section ofgatsby-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 runyarn remove gatsby-remark-prismjs
.Go read npmjs.com/package/remark-shiki-twoslash to see what is available, this module leaves all the heavy work to that module.