Eleventy 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
- Check version of Eleventy: this plugin requires Eleventy 1.0 or newer, see below for details
- Install the dependency:
yarn add eleventy-plugin-shiki-twoslash
- Include
"eleventy-plugin-shiki-twoslash"
in the plugins section of.eleventy.js
```ts
const shikiTwoslash = require("eleventy-plugin-shiki-twoslash")
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(shikiTwoslash, { theme: "nord" })
}
```
- Include the CSS which you can find in the next step
- Go read npmjs.com/package/remark-shiki-twoslash to see the next steps, and what is available, this module leaves all the heavy work to that module.