Configuration for using raw HTML in Markdown with Rollup, Solid-JS etc

[patreeceeo]

Hi, I'm excited about using Rehype in my current project! I want to love this library for its extensibility and power but sometimes that means it can be a steep learning curve, which I'm trying to scramble up right now.

Anyway, I want to use raw HTML tags in my Markdown e.g. <em>Raw</em> HTML.

I'm using Rollup, and my configuration looks like this:

import typescript from "@rollup/plugin-typescript";
import json from "@rollup/plugin-json";
import dynamicImportVars from "@rollup/plugin-dynamic-import-vars";
import mdx from "@mdx-js/rollup";
import raw from 'rehype-raw';

export default {
  input: "src/index.ts",
  output: {
    sourcemap: true,
    dir: "dist",
  },
  plugins: [
    mdx({
      jsxImportSource: "solid-jsx",
      rehypePlugins: [raw],
      remarkRehypeOptions: {
        allowDangerousHtml: true
      },
    }),
    typescript(),
    json(),
    dynamicImportVars.default(),
  ],
  external: ["solid-jsx/jsx-runtime"]
};

However, the raw HTML tags in my Markdown are still getting removed.

Does the above configuration look correct?

Any tips for investigating why this is happening? The contents of the dist folder seem to be out-of-date yet I can still see updates on my site when I edit the markdown. Also I haven't quite gotten a handle on how to debug solid-js components yet (coming from React.) I'm probably trying to use too many new things at once, but anyway, I digress...

[wooorm]

You are using MDX through the rollup loader.
If you use .mdx extensions, then those “tags” (<em>) are not HTML, but JSX. The content is MDX, not markdown.
If you use .md extensions, then those tags are HTML, not JSX. The content is markdown, not MDX.

If you are using .mdx, you should not use rehype-raw, and you should not need allowDangerousHtml. Then everything will work already. This seems the best solution to me: use the MDX format with MDX.

If you are using .md, it gets more complex. If that’s the case I can advise more.

[patreeceeo]

Wow, thanks for the quick reply! I am using .md extensions.

[wooorm]

And can you switch?

[patreeceeo]

Yup, fine with me.