An Introduction to MDXJS

Markdown has long been the preferred format for programmers to write documents. It's simple enough for almost everyone to learn and adapt, while also being easy to format and style. It's so popular that Markdown's commands have been used in chat applications like Slack and Whatsapp, as well as document applications like Dropbox Paper and Notion. When GitHub introduced Markdown support for README documents, they also rendered HTML content from it—for example, we could insert some links and image elements that could render normally.

Although Markdown has no flaws, there is always room for improvement. This is where Markdown extension (MDX) comes in.

Under what circumstances would we consider using MDX instead of Markdown? One feature of MDX is the ability to integrate JavaScript with normal Markdown. Here are some examples that illustrate their convenience:

• Frontend Armory uses MDX on its educational playground Demoboard. The playground natively supports MDX and is used to create pages that can be used as both a presentation and a document, which is ideal for demonstrating React concepts and components.
• Brent Jackson proposed a completely new website building method that pairs MDX and Styled System. Each page is written in MDX, and the Styled System styles the code block. It is currently in development and you can find more details on the website.
• Use mdx-deck or Spectacle to make your next presentation more interesting. You can display the presentation directly in the presentation without switching the screen!
• MDX Go, ok-mdx, and Docz all provide tools to record component libraries using MDX. You can place components directly in the Markdown document and it works properly™.
• Some websites, including Zeit Now and Prisma documentation, use MDX to write content.

If you want to maintain a React-based blog, MDX will shine. Using it means that when you want to do something that is impossible in Markdown (or create plugins), you no longer need to create a custom React component page. I've been using it on my blog for over a year and I really like the experience. By far, one of my favorite projects is a React component I call Playground, which can be used to demonstrate small HTML/CSS/JavaScript code snippets while allowing users to edit the code. Of course, I can use some third-party services and embed the demo, but that way I don't have to load any third-party scripts.

Speaking of embedding, MDX makes it very easy to embed iFrames created by third-party services such as YouTube, Vimeo, Giphy, etc.

Use it in conjunction with Markdown

You can identify files written in MDX by the .mdx extension on the file name. But let's see what it looks like to actually write content using MDX.

 <code>import InteractiveChart from "../path/interactive-chart"; # Hello - I'm a Markdown heading This is just markdown text<interactivechart></interactivechart></code>

Have you seen it? Markdown is still possible, and it can be written with React components when interactive visualizations or styling is required. Here is an example from my collection:

Another benefit of MDX is that like components, files can be combined. This means that the page can be split into multiple blocks and reused, rendering all blocks at once.

 <code>import Header from "./path/Header.mdx" import Footer from "./path/Footer.mdx" # Here goes the actual content. Some random content goes [here](link text)</code>

Implementing MDX in an application

Most common React-based integration platforms such as Gatsby and Next have MDX plug-ins.

To integrate it in the create-react-app project, MDX provides a Babel Macro that can be imported into the application:

 <code>import { importMDX } from './mdx.macro' const MyDocument = React.lazy(() => importMDX('./my-document.mdx')) ReactDOM.render( <react.suspense fallback="{<div"> Loading...}><mydocument></mydocument></react.suspense> , document.getElementById('root') );</code>

You can also try MDX on the playground they created for this.

MDX contributors are very active in supporting Vue. An example has been provided on GitHub. But this is still in the Alpha stage and is not ready for production.

Editor support

VS Code, Vim, and Sublime Text are increasingly supporting syntax highlighting and autocomplete. However, these do have some shortcomings during use and are difficult to navigate. Many of the problems stem from the inability to predict whether we use JavaScript or Markdown in the page context. This can certainly be improved.

MDX plug-ins and extensions

A key advantage of MDX is that it is part of the content unification alliance, which organizes remark content. This means MDX can directly support the huge ecosystem of remark and rehype plugins – without reinventing the wheel. Some of these plugins, including remark-images and remark-redact, are extraordinary to say the least. To use plug-ins in MDX, you can add them to the corresponding loader or plug-in. You can even write your own MDX plug-in by referring to the MDX Create Plugin Guide.

MDX is only a few years old, but its influence in the content field has been growing. From writing blog posts and visualizing data to creating interactive presentations and presentations, MDX is perfect for many purposes – far beyond what we have covered in this article.

The above is the detailed content of An Introduction to MDXJS. For more information, please follow other related articles on the PHP Chinese website!