Usage with Turbopack

[yangbo5207]

next.config.js like this

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [['rehype-katex', { strict: true, throwOnError: true }]],
  },
})

but codehike can not use name

import {remarkCodeHike, recmaCodeHike} from 'codehike/mdx'

???

so，what should I do？

[pomber]

mdxRs doesn't support remarkPlugins yet, that means you can't use Code Hike with mdxRs.

not sure the about the next.config.js example you put there, it doesn't look like you are using mdxRs.

[amannn]

The issue seems to be that @next/mdx only works with serializable options when using Turbopack (ref).

Is there any way how to get this to work with Code Hike?

E.g. this works:

// ...
const withMDX = createMDX({
  options: {
    rehypePlugins: [['rehype-mdx-code-props']]
  }
});
export default withMDX(nextConfig);

[pomber]

To use codehike remark and recma plugins with Turbopack:

npm i remark-codehike recma-codehike

And in your next.config.mjs:

import createMDX from "@next/mdx"

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
}

/** @type {import('codehike/mdx').CodeHikeConfig} */
const chConfig = {
  components: { code: "Code" },
}

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [["remark-codehike", chConfig]],
    recmaPlugins: [["recma-codehike", chConfig]],
  },
})

export default withMDX(nextConfig)

This doesn't work on Windows, but it's not related to codehike, it's a Next.js bug.

[github-actions]

This issue has been fixed but not yet released.

Try it in your project before the release with:

npm i https://pkg.pr.new/codehike@513

Or wait for the next release.

[github-actions]

🚀 Released in codehike@1.0.6 🚀

If this was helpful, consider sponsoring Code Hike. Your contribution helps sustain open-source work.

Thanks for using Code Hike!