Open michaeloliverx opened 2 years ago
Cool, makes sense, you're welcome to take a look at switching to rehype raw 👍🏻
I was getting this error when specifying filename in the markdown.
Changed
```ts:myFilename.ts
to
```ts
and this error went away.
If anyone else is struggling with this, and also tried going down the rehype-raw rabbit hole (and failed), I've made a workaround.
I created a remark plugin that you can add directly after remark-shiki-twoslash
that will make it compatible with mdx v2:
// This is an excerpt from a @docusaurus/preset-classic docs configuration object
remarkPlugins: [
require("remark-shiki-twoslash"),
require("remark-html-to-jsx"),
],
remark-html-to-jsx
finds any nodes with the type html
(which is what remark-shiki-twoslash
outputs) and converts that html into JSX nodes by using reacts dangerouslySetInnerHTML
property. It's a total hack, but it works great for my needs. Figured I'd share:
Running into this now with Docusaurus v3 stable release. I will try to use @ksandin's workaround (it's not a published package, so need to bring it in manually).
So, I patched docusaurus-preset-shiki-twoslash
using the remark-html-to-jsx
idea like this:
// at the top
const remarkHtmlToJsx = require('./remark-html-to-jsx')
// in `addTwoslash`
a.beforeDefaultRemarkPlugins.push([twoslash, options], remarkHtmlToJsx)
And that does "fix" the error, but it appears the resulting HTML set is not processed through MDXComponents
:
That div
should really be CodeBlock
, and so Twoslash does compile/run its logic but because the React component isn't used, there's only static HTML on the page without annotations/styles.
So, this issue from 2021 means that docusaurus-preset-shiki-twoslash
and remark-shiki-twoslash
are currently completely unusable by anyone who dare use an up-to-date version of Docusaurus? Cool.
I am trying to use
remark-shiki-twoslash
with@mdx-js/mdx@2.0.0-rc.2
(v2) and have the following error:Full details are on this issue https://github.com/mdx-js/mdx/issues/1820