Is there any way to render a html file in a markdown post with Docusaurus?

user_16293792 0
Viewed 918

I am trying to convert a blog from Jekyll to Docusaurus and am having an issue figuring out how to render an HTML file from within the markdown post.

In Jekyll, I am able to do so like so:

{% include [filename].html %}

I can't seem to figure out how to do something similar in Docusaurus.

If relevant, the html file is created via a Python Plotly figure.

Any help or hints appreciated.

docusaurus plotly
1 Answers

The good news? It is possible.

The bad news? You may have to edit the HTML to fit the mdx rules… Or use iframe.

Example 1 (using iframe)

In your docs folder…

  1. Create a html file with all your HTML, like page.html.

  2. Create a file with the extension .mdx, like intro.mdx.

intro.mdx

# Rendering HTML

Some important information.

<iframe src='page.html' width='100%'></iframe>

page.html

<html>
<head>
    <style>
        .myDiv {border: 5px outset red; background-color: lightblue; text-align: center;}
    </style>
</head>
<body>
<div class="myDiv">
  <h2>This is a heading in a div element</h2>
  <p>This is some text in a div element.</p>
</div>
</body>
</html>

Example 2 (editing the HTML)

Create a file with the extension .mdx inside your docs folder, like intro.mdx, and insert the following to check it out.

Pay attention to the {{, and that the attribute background-color was changed to backgroundColor.

intro.mdx

# Rendering HTML

Some important information.

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
    <h3>This is JSX</h3>
</div>

See the docs of docusaurus and the docs of MDX to understand it better.

user_57340970
Related