Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@mdx-js/mdx
Advanced tools
The @mdx-js/mdx package is a Markdown processor powered by JSX and React. It allows you to write JSX in your Markdown documents and render them as React components. This enables the embedding of dynamic content within static Markdown files, combining the simplicity of Markdown with the power of React.
Writing JSX in Markdown
Allows embedding JSX directly in your Markdown files, which can then be transformed into React components.
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { mdx } from '@mdx-js/mdx'
const mdxContent = `
# Hello, MDX!
Some **bold** text and a component:
<MyComponent />
`
const MyComponent = () => <div>My Custom Component</div>
const run = async () => {
const jsx = await mdx(mdxContent)
// Now you can render the jsx with your preferred method
}
run()
Customizing Markdown components
Enables overriding default HTML tags with custom React components for a more personalized rendering of Markdown content.
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
const components = {
h1: props => <h1 style={{ color: 'tomato' }} {...props} />,
p: props => <p style={{ fontSize: '18px' }} {...props} />
}
const MarkdownContent = () => (
<MDXProvider components={components}>
<YourMDXContent />
</MDXProvider>
)
Using MDX files as pages in a React application
Facilitates the use of MDX files as if they were React components, making it easy to integrate them into a React application as pages or parts of pages.
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import YourMDXPage from './YourMDXPage.mdx'
const App = () => (
<MDXProvider>
<YourMDXPage />
</MDXProvider>
)
Remark is a markdown processor powered by plugins part of the unified collective. It is similar to @mdx-js/mdx in that it allows for the transformation and parsing of Markdown content, but it does not support JSX out of the box.
Rehype is an HTML processor that can be used to manipulate and process HTML content. It is also part of the unified collective and can be used in conjunction with remark to render Markdown as HTML. However, it does not natively support JSX or the direct use of React components.
Markdown-it is a Markdown parser with a focus on speed and extensibility. It supports a variety of plugins to extend its functionality but does not have built-in support for JSX or React components, making it less suitable for projects that require tight integration with React.
@mdx-js/mdx
MDX implementation using remark.
npm:
npm i -S @mdx-js/mdx
const mdx = require('@mdx-js/mdx')
const result = await mdx(`
# Hello, MDX
I <3 Markdown and JSX
`)
console.log(result)
Yields:
export default ({components, ...props}) => <MDXTag name="wrapper" components={components}><MDXTag name="h1" components={components}>{`Hello, MDX`}</MDXTag>
<MDXTag name="p" components={components}>{`I <3 Markdown and JSX`}</MDXTag></MDXTag>
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.
MIT © Compositor and ZEIT
FAQs
MDX compiler
The npm package @mdx-js/mdx receives a total of 2,058,885 weekly downloads. As such, @mdx-js/mdx popularity was classified as popular.
We found that @mdx-js/mdx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.