[Question] - How to use Prism plugins?

[Fghurayri]

Hello friends,

Thank you for this wonderful tool!

I am trying to use a couple of Prism plugins in my Sveltekit project for highlighting code. After reading the docs, I deduced that the best approach is via remark or rehype plugins.

I tried the following:

// mdsvex.config
import prism from "remark-prism";

const prismOptions = {
  plugins: ["line-numbers"],
};

const config = {
  extensions: [".svelte.md", ".md", ".svx"],

  smartypants: {
    dashes: "oldschool",
  },

  remarkPlugins: [[prism, prismOptions]],
  rehypePlugins: [],
};

export default config;

The error message

offset is longer than source length!
Error: offset is longer than source length!
    at numberToPos (node_modules/vite/dist/node/chunks/dep-11db14da.js:4244:15)
    at formatError (node_modules/vite/dist/node/chunks/dep-11db14da.js:50700:24)
    at TransformContext.error (node_modules/vite/dist/node/chunks/dep-11db14da.js:50680:19)
    at Object.transform (node_modules/vite/dist/node/chunks/dep-11db14da.js:50888:25)
    at async transformRequest node_modules/vite/dist/node/chunks/dep-11db14da.js:66636:29)
    at async instantiateModule (node_modules/vite/dist/node/chunks/dep-11db14da.js:73271:10)

Can you please guide me on how to get this working? I appreciate your help! 🙌

-Faisal

[pngwn]

The problem here is that most prism plugin run in the browser rather than in node and all of the prism highlighting is done ahead of time. I'm not sure there is a great way to get most of these plugins to work.

[pngwn]

This won't be addressed in core. v1 will move away from Prism entirely.