Skip to content

Instantly share code, notes, and snippets.

@jtomchak
Last active February 10, 2023 19:53
Show Gist options
  • Save jtomchak/ab0e9ca3431cc8e66cc2a5a4bab33d59 to your computer and use it in GitHub Desktop.
Save jtomchak/ab0e9ca3431cc8e66cc2a5a4bab33d59 to your computer and use it in GitHub Desktop.
export default {
presets: [
[
"@babel/preset-react",
{
runtime: "automatic",
},
],
],
};
import React from "react";
function Demo() {
return <h2>HOLY BUCKETS</h2>;
}
export default Demo;
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import { renderToStaticMarkup } from "react-dom/server";
import * as jsxRuntime from "react/jsx-runtime";
import { evaluateSync, compile } from "@mdx-js/mdx";
import { createElement } from "react";
import { useMDXComponents, MDXProvider } from "@mdx-js/react";
const mdxDoc = `
---
title: Example Post
published: 2021-02-13
description: This is some description
---
# Wahoo
Here's a **neat** demo:
<Demo />
`.trim();
console.log(await main(mdxDoc));
async function main(source) {
// import needed JSX components
// required babel presets and
// node --experimental-loader @node-loader/babel
const Demo = (await import("./Demo.js")).default;
/**
* evaluateSync will compile & run the mdx source and return
* an MDXModule
* interface MDXModule {
* This could be any value that is exported from the MDX file.
* [key: string]: unknown;
* A functional JSX component which renders the content of the MDX file.
* default: MDXContent;
* }
*/
const MDXSource = await evaluateSync(source, {
...jsxRuntime,
useMDXComponents,
useDynamicImport: true,
remarkPlugins: [remarkGfm],
rehypePlugins: [rehypeHighlight],
}).default;
return renderToStaticMarkup(
createElement(
MDXProvider,
{ components: { Demo } },
createElement(MDXSource, null, null)
)
);
}
{
"name": "mdxhtml",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"exec": "node --experimental-loader @node-loader/babel index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-react": "^7.18.6",
"@mdx-js/mdx": "^2.2.1",
"@mdx-js/node-loader": "^2.2.1",
"@node-loader/babel": "^2.0.1",
"esbuild": "^0.17.6",
"mdx-bundler": "^9.2.1",
"next-mdx-remote": "^4.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-highlight": "^6.0.0",
"remark-gfm": "^3.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment