How to use the @mdx-js/mdx function in @mdx-js/mdx

To help you get started, we’ve selected a few @mdx-js/mdx examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github xyc / vscode-mdx-preview / packages / extension / transpiler / mdx / mdx.ts View on Github external
export const mdxTranspileAsync = async (mdxText: string, isEntry: boolean, preview: Preview) => {
  let mdxTextToCompile: string;
  if (!hasDefaultExport(mdxText)) {
    // inject vscode markdown styles if we haven't found a default export
    mdxTextToCompile = injectMDXStyles(mdxText, preview);
  } else {
    mdxTextToCompile = mdxText;
  const compiledMDX = await mdx(mdxTextToCompile);
  return wrapCompiledMdx(compiledMDX, isEntry);
github openmultiplayer / web / frontend / src / mdx-helpers / ssr.ts View on Github external
export const renderToString = async (
  source: Buffer | string,
  { components, mdxOptions, scope = {} }: MarkdownRenderConfig
): Promise => {
  // transform it into react
  const code = await mdx(source, { ...mdxOptions, skipExport: true });

  // mdx gives us back es6 code, we then need to transform into two formats:
  // - first a version we can render to string right now as a "serialized" result
  // - next a version that is fully browser-compatible that we can eval to rehydrate

  // this one is for immediate evaluation so we can renderToString below
  const now = await transformAsync(code, {
    presets: [presetReact, presetEnv],
    configFile: false,

  // this one is for the browser to eval and rehydrate, later
  const later = await transformAsync(code, {
    presets: [presetReact, presetEnv],
    plugins: [pluginBrowser],
    configFile: false,