MDXJS簡介

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

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

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

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

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

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

將其與Markdown 結合使用

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

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

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

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

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

在應用程序中實現MDX

大多數常見的基於React 的集成平台（如Gatsby 和Next）都有MDX 插件。

要在create-react-app 項目中集成它，MDX 提供了一個可以導入到應用程序中的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>

您也可以在他們為此創建的遊樂場上試用MDX。

MDX 貢獻者非常積極地致力於為Vue 提供支持。 GitHub 上已經提供了一個示例。但這還處於Alpha 階段，尚未準備好用於生產環境。

編輯器支持

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

MDX 插件和擴展

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

MDX 只有幾歲，但它在內容領域的影響力一直在增長。從撰寫博客文章和可視化數據到創建交互式演示和演示文稿，MDX 非常適合許多用途——遠遠超出了我們在本文介紹中介紹的內容。

以上是MDXJS簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！