Markdown 長(zhǎng)期以來一直是程序員編寫文檔的首選格式。它足夠簡(jiǎn)單，幾乎每個(gè)人都能學(xué)習(xí)和適應(yīng)，同時(shí)又易於格式化和設(shè)置樣式。它非常流行，以至於Markdown 的命令已被用於Slack 和Whatsapp 等聊天應(yīng)用程序以及Dropbox Paper 和Notion 等文檔應(yīng)用程序。當(dāng)GitHub 為README 文檔引入Markdown 支持時(shí)，他們也從中渲染了HTML 內(nèi)容——例如，我們可以插入一些鏈接和圖像元素，它們可以正常渲染。

儘管Markdown 並沒有任何缺陷，但總有改進(jìn)的空間。這就是Markdown 擴(kuò)展(MDX) 的用武之地。

在什麼情況下我們會(huì)考慮使用MDX 而不是Markdown？ MDX 的一個(gè)特點(diǎn)是可以在使用普通Markdown 的情況下集成JavaScript。以下是一些說明其便捷性的示例：

• Frontend Armory 在其教育遊樂場(chǎng)Demoboard 上使用MDX。該遊樂場(chǎng)原生支持MDX，用於創(chuàng)建既可作為演示又可作為文檔的頁(yè)面，這對(duì)於演示React 概念和組件非常理想。
• Brent Jackson 提出了一種全新的網(wǎng)站構(gòu)建方法，將MDX 和Styled System 配對(duì)使用。每個(gè)頁(yè)面都用MDX 編寫，Styled System 為代碼塊設(shè)置樣式。它目前正在開發(fā)中，您可以在網(wǎng)站上找到更多詳細(xì)信息。
• 使用mdx-deck 或Spectacle 可以使您的下一個(gè)演示文稿更有趣。您可以在演示文稿中直接顯示演示，無需切換屏幕！
• MDX Go、ok-mdx 和Docz 都提供使用MDX 記錄組件庫(kù)的工具。您可以直接在Markdown 文檔中放置組件，它就能正常工作?。
• 一些網(wǎng)站，包括Zeit Now 和Prisma 文檔，都使用MDX 來編寫內(nèi)容。

如果您想維護(hù)一個(gè)基於React 的博客，MDX 將大放異彩。使用它意味著當(dāng)您想要做一些Markdown 中不可能做到的事情（或創(chuàng)建插件）時(shí)，您不再需要?jiǎng)?chuàng)建自定義React 組件頁(yè)面。我已經(jīng)在我的博客上使用它一年多了，並且非常喜歡這種體驗(yàn)。到目前為止，我最喜歡的項(xiàng)目之一是一個(gè)我稱之為Playground 的React 組件，它可以用來演示小的HTML/CSS/JavaScript 代碼片段，同時(shí)允許用戶編輯代碼。當(dāng)然，我可以使用一些第三方服務(wù)並嵌入演示，但這這樣我就不必加載任何第三方腳本了。

說到嵌入，MDX 使得嵌入由第三方服務(wù)（例如YouTube、Vimeo、Giphy 等）創(chuàng)建的iFrame非常容易。

將其與Markdown 結(jié)合使用

您可以通過文件名上的.mdx 擴(kuò)展名來識(shí)別用MDX 編寫的文件。但是，讓我們看看實(shí)際使用MDX 編寫內(nèi)容的樣子。

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

看到了嗎？仍然可以使用Markdown，並且可以在需要交互式可視化或樣式時(shí)將其與React 組件一起編寫。這是我作品集中的一個(gè)示例：

MDX 的另一個(gè)好處是，就像組件一樣，文件是可以組合的。這意味著頁(yè)面可以拆分成多個(gè)塊並重複使用，一次性渲染所有塊。

 <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>

在應(yīng)用程序中實(shí)現(xiàn)MDX

大多數(shù)常見的基於React 的集成平臺(tái)（如Gatsby 和Next）都有MDX 插件。

要在create-react-app 項(xiàng)目中集成它，MDX 提供了一個(gè)可以導(dǎo)入到應(yīng)用程序中的Babel Macro：

 <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>

您也可以在他們?yōu)榇藙?chuàng)建的遊樂場(chǎng)上試用MDX。

MDX 貢獻(xiàn)者非常積極地致力於為Vue 提供支持。 GitHub 上已經(jīng)提供了一個(gè)示例。但這還處?kù)禔lpha 階段，尚未準(zhǔn)備好用於生產(chǎn)環(huán)境。

編輯器支持

VS Code、Vim 和Sublime Text 都越來越支持語法高亮和自動(dòng)完成。但是，在使用過程中，這些確實(shí)有一些不足之處，並且難以導(dǎo)航。許多問題都源於無法預(yù)測(cè)在頁(yè)面上下文中我們是使用JavaScript 還是Markdown。這當(dāng)然是可以改進(jìn)的。

MDX 插件和擴(kuò)展

MDX 的一個(gè)關(guān)鍵優(yōu)勢(shì)是它是內(nèi)容統(tǒng)一聯(lián)盟的一部分，該聯(lián)盟組織remark 內(nèi)容。這意味著MDX 可以直接支持龐大的remark 插件和rehype 插件生態(tài)系統(tǒng)——無需重新發(fā)明輪子。其中一些插件，包括remark-images 和remark-redact，至少可以說是非凡的。要在MDX 中使用插件，您可以將它們添加到相應(yīng)的加載器或插件中。您甚至可以通過參考MDX 創(chuàng)建插件指南來編寫自己的MDX 插件。

MDX 只有幾歲，但它在內(nèi)容領(lǐng)域的影響力一直在增長(zhǎng)。從撰寫博客文章和可視化數(shù)據(jù)到創(chuàng)建交互式演示和演示文稿，MDX 非常適合許多用途——遠(yuǎn)遠(yuǎn)超出了我們?cè)诒疚慕榻B中介紹的內(nèi)容。

以上是MDXJS簡(jiǎn)介的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！