How to handle HTML with inline styles?

[smakman]

I'm trying to parse markdown that contains HTML tags with inline styles (for example <iframe style="overflow: hidden" />), which results in:

Error: The `style` prop expects a mapping from style properties to values, not a string. 
For example, style={{marginRight: spacing + 'em'}} when using JSX.

I tried using rehype-react:

const source = await serialize(content, {
  mdxOptions: {
    rehypePlugins: [rehypeReact],
  },
});

But this results in:

Error: [next-mdx-remote] error compiling MDX: createElement is not a function

Is there any way to parse HTML with inline styles?

[BRKalow]

As far as I know, this isn't supported with MDX as tags are treated as JSX, not HTML. 💭

[talatkuyuk]

The same issue.

Actually, in the micromark which is the core machine for remark-parse, it says that below mdx is valid: https://github.com/micromark/mdx-state-machine#721-html

# Hello, <span style='color:red'>world</span>!

[BRKalow]

I don't think that doc is accurate, based on the playground:

[talatkuyuk]

@smakman I suppose the rehype-plugin is not the plugin which can be used in the serialize function. In the docs, it says that This package is a unified plugin that compiles HTML (hast) to React nodes (the virtual DOM that React uses). Means that it is a kind of compiler that can be used with unified. This transformation is already being done via serialize itself (via @mdx-js/mdx).

You can see the pipeline, which is very opinionated https://github.com/mdx-js/mdx/blob/2598a82abdaa5cdf94fa9d2a08cfa7024d52998a/packages/mdx/lib/core.js#L96

I see that the plugin responsible for the mdx is remarkMdxhttps://www.npmjs.com/package/remark-mdx which applies several micromark extensions to parse the syntax and applies several mdast utilities to build and serialize the AST. In this respect, the issue you raised is depend on very deep packages.

[talatkuyuk]

@BRKalow As far as I see in the documentation, https://github.com/micromark/micromark#intro, The micromark uses common-markup-state-machine. I do not understand the relation between the micromark and the mdx-state-machine which is in progress, the document says. May be the style issue which I raised above will be available in later.

[BRKalow]

I'm going to close this out as addressing this is out of scope of what next-mdx-remote wants to be responsible for. Feel free to continue the discussion!

[Azeem838]

Hi

To fix this issue, I used the serializer as follows:

  serialize(`<span style="color: red">Hello</span> World`, {
    mdxOptions: {
      rehypePlugins: [rehypeRaw],
      format: "md",
    },
  })

[eric-burel]

Hi folks, sorry for digging out this issue but I've just hit it and it's a bit nasty. Is there a way to tell mdx to treat the content as "raw" markdown, and not "mdx" with JSX in it? Maybe this could be documented somehow, even if not directly covered by next-mdx-remote. My use case is rendering my GitHub profile description, in markdown, from within my app. I'd like to reuse most of the code from my next-mdx-remote setup, but I am ok to add a few tweaks to support this.

I've tried tweaking the component that renders the "img" tag where I want to apply style, however not all images are using the components (markdown images will use it but not inlined HTML images).