@aitodotai/mdx-js-runtime

Parse and render MDX in a runtime environment

Usage no npm install needed!

<script type="module">
  import aitodotaiMdxJsRuntime from 'https://cdn.skypack.dev/@aitodotai/mdx-js-runtime';
</script>

README

@mdx-js/runtime

Build Status lerna Join the community on Spectrum

Parse and render MDX in a runtime environment.

:warning: warning: this is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes. It should also not be used with user input that isn’t sandboxed.

Installation

npm:

npm i -S @mdx-js/runtime

Usage

import React from 'react'
import MDX from '@mdx-js/runtime'

// Provide custom components for markdown elements
const components = {
  h1: props => <h1 style={{ color: 'tomato' }} {...props} />
}

// Provide custom components that will be referenced as JSX
// in the markdown string
const scope = {
  Demo: props => <h1>This is a demo component</h1>
}

const mdx = `
# Hello, world!

<Demo />
`

export default () => (
  <MDX components={components} scope={scope}>{mdx}</MDX>
)

Contribute

See contributing.md in mdx-js/mdx for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Compositor and ZEIT