Follow the tutorial for switching to shiki twoslash codeblocks

[orta]

This is now outdated, and I'd recommend following the instructions on https://www.npmjs.com/package/gatsby-remark-shiki-twoslash

---

Takes the default template from: npx gatsby new gatsby-twoslash-shiki-blog https://github.com/gatsbyjs/gatsby-starter-blog and switches it to use Shiki + twoslash code samples

Summary:

• Switch gatsby-remark-prismjs -> gatsby-remark-shiki-twoslash in config
• Add dependencies
• Add CSS
• Add JS
• Add twoslash after code samples (I excluded that from this PR to keep it focused)

Preview link: https://gatsby-twoslash-shiki-blog-example.now.sh/new-beginnings/
NPM: https://www.npmjs.com/package/gatsby-remark-shiki-twoslash
Twoslash: https://www.npmjs.com/package/@typescript/twoslash

[Jack-Works]

gatsby-remark-shiki-twoslash/dist/dom no longer exists in 0.7.0

[orta]

Good point, these have moved into shiki-twoslash: shiki-twoslash/dist/dom instead.

[molebox]

Hey @orta , im trying to add this to a gatsby project and am getting this error: If you're trying to use a package make sure that 'shiki-twoslash/dist/dom' is installed. If you're trying to use a local file make sure that the path is correct.

The import: import {setupTwoslashHovers} from "shiki-twoslash/dist/dom"

Do you have any ideas whats going on here?

[orta]

How did you get to this link? I should make them all re-direct to the npm module which is always to date: https://www.npmjs.com/package/gatsby-remark-shiki-twoslash

[molebox]

How did you get to this link? I should make them all re-direct to the npm module which is always to date: https://www.npmjs.com/package/gatsby-remark-shiki-twoslash

This PR? On the npm package readme, the first line: Read this PR and apply the same to your project. links here.

But that readme doesnt explain about setting up the twoslash hover. I looked at this PR then saw your comment above about the change re: shiki-twoslash/dist/dom

[orta]

Ace, thanks removed - the highlights come entirely from the CSS! Shiki Twoslash doesn't use JS at all.