Plugin - @nakedjsx/plugin-asset-mdx

Import an MDX file as a JSX function.

This plugin is not bundled with the npx nakedjsx command and must be installed. It can be installed globally:

npm install -g @nakedjsx/plugin-asset-mdx

Or locally, in any parent directory of your source files (you don't otherwise need to be using a Node project):

npm install @nakedjsx/plugin-asset-mdx

Usage example:

src/index-page.jsx

import { Page } from '@nakedjsx/core/page';

import HelloMdx from ':mdx:hello.mdx';

Page.Create('en');
Page.AppendBody(
    <>
        <HelloMdx />
    </>
    );
Page.Render();

src/hello.mdx

# Hello, MDX!

This markdown will become a *paragraph* tag.

> And this, a blockquote.

1. Lists
2. are also supported

<p css="color: fuchsia">And HTML with scoped CSS.</p>

# build command

$ npx nakedjsx src --out out --plugin mdx @nakedjsx/plugin-asset-mdx --pretty

The result:

out/index.html (507 bytes) (open in new tab)

<!doctype html>
<html lang="en">
    <head>
        <style>
            .a {
                color: #f0f;
            }
        </style>
    </head>
    <body>
        <h1>Hello, MDX!</h1>
        <p>This markdown will become a <em>paragraph</em> tag.</p>
        <blockquote>
            <p>And this, a blockquote.</p>
        </blockquote>
        <ol>
            <li>Lists</li>
            <li>are also supported</li>
        </ol>
        <p class="a">And HTML with scoped CSS.</p>
    </body>
</html>

←Return to NakedJSX documentation

NakedJSX Plugin - @nakedjsx/plugin-asset-mdx

Plugin - @nakedjsx/plugin-asset-mdx