SolidJS•11mo ago

Solid-start + mdx: remark-shiki-twoslash does not work

I tried the current version of solid-start with mdx and attempted to integrate remark-shiki-twoslash (same as the docs), but no luck so far. I do not see syntax highlighting.

1 Reply

Alex LohrOP•11mo ago

I used the same configuration that is exported in solid-start-mdx (copy and pasted the return value, except for the other rehype/remark plugins except for rehypeRaw).

import { nodeTypes } from "@mdx-js/mdx";
import { defineConfig } from "@solidjs/start/config";
/* @ts-ignore */
import pkg from "@vinxi/plugin-mdx";
import rehypeRaw from "rehype-raw";
import { default as shikiTwoslash } from "remark-shiki-twoslash";

const { default: mdx } = pkg;
export default defineConfig({
  start: {
    ssr: true,
    extensions: ["mdx", "md"],
    server: { preset: "static" },
  },
  plugins: [
    [mdx.withImports({})({
      jsx: true,
      jsxImportSource: "solid-js",
      providerImportSource: "solid-mdx",
      mdxOptions: {
        rehypePlugins: [[rehypeRaw, { passThrough: nodeTypes }]],
        remarkPlugins: [
          [
            shikiTwoslash,
            {
              disableImplicitReactImport: true,
              includeJSDocInHover: true,
              theme: "css-variables",
              defaultCompilerOptions: {
                allowSyntheticDefaultImports: true,
                esModuleInterop: true,
                target: "ESNext",
                module: "ESNext",
                lib: ["lib.dom.d.ts", "lib.es2015.d.ts"],
                jsxImportSource: "solid-js",
                jsx: "preserve",
                types: ["vite/client"],
                paths: {
                  "~/*": ["./src/*"],
                },
              },
            },
          ],
        ],
      },
    })],
  ],
});

import { nodeTypes } from "@mdx-js/mdx";
import { defineConfig } from "@solidjs/start/config";
/* @ts-ignore */
import pkg from "@vinxi/plugin-mdx";
import rehypeRaw from "rehype-raw";
import { default as shikiTwoslash } from "remark-shiki-twoslash";

const { default: mdx } = pkg;
export default defineConfig({
  start: {
    ssr: true,
    extensions: ["mdx", "md"],
    server: { preset: "static" },
  },
  plugins: [
    [mdx.withImports({})({
      jsx: true,
      jsxImportSource: "solid-js",
      providerImportSource: "solid-mdx",
      mdxOptions: {
        rehypePlugins: [[rehypeRaw, { passThrough: nodeTypes }]],
        remarkPlugins: [
          [
            shikiTwoslash,
            {
              disableImplicitReactImport: true,
              includeJSDocInHover: true,
              theme: "css-variables",
              defaultCompilerOptions: {
                allowSyntheticDefaultImports: true,
                esModuleInterop: true,
                target: "ESNext",
                module: "ESNext",
                lib: ["lib.dom.d.ts", "lib.es2015.d.ts"],
                jsxImportSource: "solid-js",
                jsx: "preserve",
                types: ["vite/client"],
                paths: {
                  "~/*": ["./src/*"],
                },
              },
            },
          ],
        ],
      },
    })],
  ],
});

I even updated to the newest versions of everything. Updated solid-start again, still doesn't work. console output in the mdx plugin is suppressed, how do you debug it? I found the solution: remarkPlugins/rehashPlugins need to be a level above mdxOptions!

Gaming

Programming

Solid-start + mdx: remark-shiki-twoslash does not work