Code block treatment breaks compatibility with some rehype plugins?

Was trying to get https://github.com/rsclarke/rehype-shiki to work. It lets you syntax highlight with any VSCode theme. It wasn’t working, so I dug into it: it just walks the tree lookiing for pre tags wrapping a code tag.

But, it seems MDsvex is doing something special with @html that breaks this https://github.com/pngwn/MDsveX/blob/master/packages/mdsvex/test/it/code_highlighting.test.ts#L64

I’m just going to use the built-in syntax highlighting for now, but just making a note of this with this issue

[michaeloliverx]

Okay I got around it again by using the custom highlight function 😄

// svelte.config.js
import preprocess from "svelte-preprocess";
import { mdsvex } from "mdsvex";
import {
  createShikiHighlighter,
  runTwoSlash,
  renderCodeToHTML,
} from "shiki-twoslash";
import { readFileSync } from "fs";

// From https://github.com/whizkydee/vscode-palenight-theme/blob/master/themes/palenight.json
const palenightTheme = JSON.parse(readFileSync("./palenight-theme.json"));

const mdsvexPreprocess = mdsvex({
  extensions: [".svx", ".md"],
  highlight: {
    highlighter: async (code, lang, meta) => {
      const highlighter = await createShikiHighlighter({
        theme: palenightTheme,
      });

      let twoslashResults = null;
      if (meta && meta.includes("twoslash")) {
        twoslashResults = runTwoSlash(code, lang, {});
      }

      const html = renderCodeToHTML(
        code,
        lang,
        meta || [],
        {},
        highlighter,
        twoslashResults
      );

      return `{@html \`${html}\` }`;
    },
  },
});

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: [mdsvexPreprocess, preprocess()],
  extensions: [".svelte", ".svx"],
  kit: {
    target: "#svelte",
  },
};

export default config;

Working great:

[pngwn]

Yeah, you can apply any textmate grammar at all which is better than Prism’s non-standard grammar (even though they have some similarities) as you don’t need to write a new grammar when you’re doing something funky.

The other reason is more selfish, the way Prism is built makes it incredibly difficult to work with in various contexts. It is really quite frustrating and makes a mess of my code due to the UMD format that it publishes. shiki is much friendlier in that regard.