How can I integrate a html file, and ultimately a React component, into a markdown webpage

Question

I have a react app that I am currently using an iframe to show in my markdown webpage. However, I am not satisfied with the functionality due to issues with scrolling on the iframe.

Therefore, I would like to embed the React component directly into the markdown file, which itself would be loaded onto a webpage, using Material for mkdocs.

Answer 1

If you follow he commonmark specification, you can't. Source: https://commonmark.org/

Commonmark tries to define a "standard" markdown flavor with very high compatibility.

There are tons of other flavors, some of wich might support your use case. Each of them will have their own implementation of "embed markup" and how it will be rendered. So this will limit you to this specific flavor of markup.

Depending on your use case, this might be no issue. A lot of wiki systems have their own flavor of Markdown, GitHub has their own flavor of markdown as well.

So if you're building your own system that supports markdown, I would recomment to pick one of those existing flavors that supports embedding.

If you are looking for commonly interpreted markdown, embedding is not supported.

Here's some information about the Markdown flavor used in mkdocs but I suppose that you could use other flavors via plugins.

The Wikipedia article about Markdown is worth a read to get an overview of your options as well.

Answer 2

Material for MkDocs uses Python Markdown, which supports mixing Markdown and HTML. Not only can you include HTML in the Markdown files but you can even have Markdown inside your HTML if you configure an extension in your mkdocs.yml and add an attribute for each outer HTML element that contains it.

To include the React component you will also need to configure mkdocs to include the corresponding JS and probably CSS. The extra_javascript and extra_css attributes are what you are looking for.