mirror of
https://github.com/mdx-js/mdx.git
synced 2024-09-19 03:17:10 +03:00
163 lines
5.3 KiB
Markdown
163 lines
5.3 KiB
Markdown
<p align="center">
|
||
<a href="https://mdxjs.com">
|
||
<img alt="MDX" src="https://mdx-logo.now.sh" width="60" />
|
||
</a>
|
||
</p>
|
||
|
||
# Markdown for the component era
|
||
|
||
[![Build][build-badge]][build]
|
||
[![Coverage][coverage-badge]][coverage]
|
||
[![Sponsors][sponsors-badge]][collective]
|
||
[![Backers][backers-badge]][collective]
|
||
[![Chat][chat-badge]][chat]
|
||
|
||
[MDX][website] is an authorable format that lets you seamlessly write JSX in
|
||
your markdown documents.
|
||
You can import components, such as interactive charts or alerts, and embed them
|
||
within your content.
|
||
This makes writing long-form content with components a blast.
|
||
🚀
|
||
|
||
```mdx
|
||
import {Chart} from './snowfall.js'
|
||
export const year = 2018
|
||
|
||
# Last year’s snowfall
|
||
|
||
In {year}, the snowfall was above average.
|
||
It was followed by a warm spring which caused
|
||
flood conditions in many of the nearby rivers.
|
||
|
||
<Chart year={year} color="#fcb32c" />
|
||
```
|
||
|
||
See [§ What is MDX](https://v2.mdxjs.com/mdx/) for more info on the format.
|
||
See [§ Playground](https://v2.mdxjs.com/playground/) to try it out.
|
||
|
||
## What is this?
|
||
|
||
This GitHub repository contains several packages for compiling the MDX format to
|
||
JavaScript, integrating with bundlers such as webpack and Rollup, and for using
|
||
it with frameworks such as React, Preact, and Vue.
|
||
|
||
See [§ Getting started](https://v2.mdxjs.com/getting-started/) for how to
|
||
integrate MDX into your project.
|
||
|
||
## Security
|
||
|
||
See [§ Security][security] on our site for information.
|
||
|
||
## Contribute
|
||
|
||
See [§ Contribute][contribute] on our site for ways to get started.
|
||
See [§ Support][support] for ways to get help.
|
||
|
||
This project has a [code of conduct][coc].
|
||
By interacting with this repository, organization, or community you agree to
|
||
abide by its terms.
|
||
|
||
## Sponsor
|
||
|
||
See [§ Sponsor][sponsor] on our site for how to help financially.
|
||
|
||
<table>
|
||
<tr valign="middle">
|
||
<td width="20%" align="center" rowspan="2" colspan="2">
|
||
<a href="https://vercel.com">Vercel</a><br><br>
|
||
<a href="https://vercel.com"><img src="https://avatars1.githubusercontent.com/u/14985020?s=256&v=4" width="128"></a>
|
||
</td>
|
||
<td width="20%" align="center" rowspan="2" colspan="2">
|
||
<a href="https://motif.land">Motif</a><br><br>
|
||
<a href="https://motif.land"><img src="https://avatars1.githubusercontent.com/u/74457950?s=256&v=4" width="128"></a>
|
||
</td>
|
||
<td width="20%" align="center" rowspan="2" colspan="2">
|
||
<a href="https://www.hashicorp.com">HashiCorp</a><br><br>
|
||
<a href="https://www.hashicorp.com"><img src="https://avatars1.githubusercontent.com/u/761456?s=256&v=4" width="128"></a>
|
||
</td>
|
||
<td width="20%" align="center" rowspan="2" colspan="2">
|
||
<a href="https://www.gatsbyjs.org">Gatsby</a><br><br>
|
||
<a href="https://www.gatsbyjs.org"><img src="https://avatars1.githubusercontent.com/u/12551863?s=256&v=4" width="128"></a>
|
||
</td>
|
||
<td width="20%" align="center" rowspan="2" colspan="2">
|
||
<a href="https://www.netlify.com">Netlify</a><br><br>
|
||
<!--OC has a sharper image-->
|
||
<a href="https://www.netlify.com"><img src="https://images.opencollective.com/netlify/4087de2/logo/256.png" width="128"></a>
|
||
</td>
|
||
</tr>
|
||
<tr valign="middle">
|
||
</tr>
|
||
<tr valign="middle">
|
||
<td width="10%" align="center">
|
||
<a href="https://www.coinbase.com">Coinbase</a><br><br>
|
||
<a href="https://www.coinbase.com"><img src="https://avatars1.githubusercontent.com/u/1885080?s=256&v=4" width="64"></a>
|
||
</td>
|
||
<td width="10%" align="center">
|
||
<a href="https://themeisle.com">ThemeIsle</a><br><br>
|
||
<a href="https://themeisle.com"><img src="https://avatars1.githubusercontent.com/u/58979018?s=128&v=4" width="64"></a>
|
||
</td>
|
||
<td width="10%" align="center">
|
||
<a href="https://expo.io">Expo</a><br><br>
|
||
<a href="https://expo.io"><img src="https://avatars1.githubusercontent.com/u/12504344?s=128&v=4" width="64"></a>
|
||
</td>
|
||
<td width="10%" align="center">
|
||
<a href="https://boosthub.io">Boost Hub</a><br><br>
|
||
<a href="https://boosthub.io"><img src="https://images.opencollective.com/boosthub/6318083/logo/128.png" width="64"></a>
|
||
</td>
|
||
<td width="10%" align="center">
|
||
<a href="https://www.holloway.com">Holloway</a><br><br>
|
||
<a href="https://www.holloway.com"><img src="https://avatars1.githubusercontent.com/u/35904294?s=128&v=4" width="64"></a>
|
||
</td>
|
||
<td width="10%"></td>
|
||
<td width="10%"></td>
|
||
<td width="10%"></td>
|
||
<td width="10%"></td>
|
||
<td width="10%"></td>
|
||
</tr>
|
||
<tr valign="middle">
|
||
<td width="100%" align="center" colspan="10">
|
||
<br>
|
||
<a href="https://opencollective.com/unified"><strong>You?</strong></a>
|
||
<br><br>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
## License
|
||
|
||
[MIT][] © Compositor and [Vercel][]
|
||
|
||
[build-badge]: https://github.com/mdx-js/mdx/workflows/main/badge.svg
|
||
|
||
[build]: https://github.com/mdx-js/mdx/actions
|
||
|
||
[coverage-badge]: https://img.shields.io/codecov/c/github/mdx-js/mdx/main.svg
|
||
|
||
[coverage]: https://codecov.io/github/mdx-js/mdx
|
||
|
||
[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
|
||
|
||
[backers-badge]: https://opencollective.com/unified/backers/badge.svg
|
||
|
||
[collective]: https://opencollective.com/unified
|
||
|
||
[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
|
||
|
||
[chat]: https://github.com/mdx-js/mdx/discussions
|
||
|
||
[security]: https://v2.mdxjs.com/getting-started/#security
|
||
|
||
[contribute]: https://v2.mdxjs.com/community/contribute/
|
||
|
||
[support]: https://v2.mdxjs.com/community/support/
|
||
|
||
[sponsor]: https://v2.mdxjs.com/community/sponsor/
|
||
|
||
[coc]: https://github.com/mdx-js/.github/blob/HEAD/code-of-conduct.md
|
||
|
||
[website]: https://v2.mdxjs.com
|
||
|
||
[mit]: license
|
||
|
||
[vercel]: https://vercel.com
|