Usage of Shiki Twoslash within MDX crashes Astro with ERROR: Unexpected "-"

[marcus-crane]

What version of astro are you using?

1.0.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Hi there,

First off, congrats on shipping v1.0.0 🥳

I was surprised to see that Astro has support for MDX and discovered that Shiki Twoslash is a thing as well.

Upon trying the minimal viable test for Twoslash described on the Plugin setup page, it appears that Astro crashes due to a transform error.

Given that I'm relatively new to the Astro ecosystem, I'm not equipped enough just yet to dig around the internals but as far as I can tell, this is more of a downstream issue than something wrong with the Twoslash configuration itself?

If I remove some of the interface definitions from the getting started example, Astro does render a test post with Shiki errors which suggests that it does properly setup. It's just that when a "working" example is added, the transform pipeline downstream seems to throw a fit 🤔

Anyway, perhaps it would be a good addition to the existing integration test suite as well

Thanks!

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-21ojn1?file=src/pages/blah.mdx

Participation

• I am willing to submit a pull request for this issue.

[FredKSchott]

Assigning @bholmesdev to take a look!

[bholmesdev]

☝️ Update: looks like an MDX compiler issue actually! Reported on their end and investigating a fix.

[bholmesdev]

PR made! We'll try and get this merged into MDX soon ❤️
mdx-js/mdx#2101

[bholmesdev]

Still working to get this merged into MDX! However, I should be transparent about our Shiki-Twoslash plans. We've noticed quite a few reports on inconsistencies between Markdown and MDX syntax highlighting. Fixing all of these issues could introduce breaking changes, so we've decided to ditch Shiki Twoslash as a default, using Astro's Markdown Shiki parser instead.

But don't worry, it's easy to add Shiki Twoslash if you prefer it! See this PR for full reasoning and migration instructions:
#4292

[marcus-crane]

@bholmesdev No worries and no rush. I think that makes sense and I was quite surprised to see it was included by default to be honest considering how "advanced" it is as a feature 😅

[michaeltoohig]

So at the moment shiki-twoslash is still the default?

I don't recall seeing notice of twoslash in the docs.

[bholmesdev]

@michaeltoohig @marcus-crane This change is officially pushed in @astrojs/mdx 0.10.0! Upgrade to switch from twoslash to our standard markdown parser. For instructions on adding shiki-twoslash yourself, head to our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#switch-to-a-custom-syntax-highlighter

Note my MDX compiler PR is awaiting final sign-off though. So if you add twoslash manually, you'll still hit the bug documented here. I'll ping this thread once MDX is fixed!

[bholmesdev]

Update: MDX fix merged in their latest release! This bug should be resolved when you add twoslash manually (see comment above). @marcus-crane feel free to re-open if this fix isn't resolved for you ❤

[todor0v]

@michaeltoohig @marcus-crane This change is officially pushed in @astrojs/mdx 0.10.0! Upgrade to switch from twoslash to our standard markdown parser. For instructions on adding shiki-twoslash yourself, head to our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#switch-to-a-custom-syntax-highlighter

Note my MDX compiler PR is awaiting final sign-off though. So if you add twoslash manually, you'll still hit the bug documented here. I'll ping this thread once MDX is fixed!

Hello @bholmesdev ! I am trying to use remark-shiki-twoslash. In the current docs, there is no longer a specific example showing how to do it, but I found the code you provided in another tread. Can you please advise me if this is still possible and if so what am I doing wrong? Using the following code (provided bellow) results in an error: Astro found issue(s) with your configuration: ! markdown.remarkPlugins.0 Invalid input.. If I only use the plugin for mdx, this error is gone but there is another one attacher.call is not a function. I can't seem to figure out how to proceed.

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import shikiTwoslash from "remark-shiki-twoslash";

import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
	site: "https://example.com",
	markdown: {
		syntaxHighlight: false,
		remarkPlugins: [shikiTwoslash], // use twoslash in .md
	},
	integrations: [
		mdx({
			remarkPlugins: [shikiTwoslash], // use twoslash in .mdx
		}),
		sitemap(),
	],
});

[CaptainOfPhB]

Hi @todor0v, have you fixed the Astro found issue(s) with your configuration: ! markdown.remarkPlugins.0 Invalid input. error? I met the same error as well.

[creaux]

Hello, you have maybe figured that out, but just use it as the following:

mdx({ remarkPlugins: [remarkShikiTwoslash.default] })