有声小说,长生界辰东小说,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

Mdx 讓 Markdown 步入組件時(shí)代

前言

MDX 試圖讓書(shū)寫(xiě) Markdown 和 JSX 更簡(jiǎn)單、更具表現(xiàn)力。當(dāng)你將組件 (甚至可以是動(dòng)態(tài)的或需要加載數(shù)據(jù)的組件)與 Markdown 混合書(shū)寫(xiě)時(shí)，你將寫(xiě)出更有趣的內(nèi)容。

創(chuàng)新互聯(lián)主營(yíng)陵川網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,陵川h5重慶小程序開(kāi)發(fā)搭建,陵川網(wǎng)站營(yíng)銷推廣歡迎陵川等地區(qū)企業(yè)咨詢

MDX 是什么

MDX 是一種書(shū)寫(xiě)格式，允許你在 Markdown 文檔中無(wú)縫地插入 JSX 代碼。你還可以導(dǎo)入(import)組件，例如交互式圖表或彈框，并將它們嵌入到內(nèi)容當(dāng)中。

前提條件

您應(yīng)該熟悉 markdown 語(yǔ)法和 JavaScript 語(yǔ)法 (特別是 JSX)。

MDX 示例比如官網(wǎng)的一個(gè)例子，如下代碼

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.

展示效果

效果.png

如何使用

在 create-react-app 中只需要安裝 @mdx-js/loader， create-react-app 5 支持自定義 loader

src/App.jsx

/* eslint-disable import/no-webpack-loader-syntax */
import Content from "!@mdx-js/loader!./content.mdx";

export default function App() {
  return ;
}

src/content.mdx

# Hello, world!

This is **markdown** with JSX: MDX!

如果是 webpack 項(xiàng)目只需要加一個(gè) @mdx-js/loader就可以支持

module.exports = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // `babel-loader` is optional:
          { loader: "babel-loader", options: {} },
          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              /* jsxImportSource: …, otherOptions… */
            },
          },
        ],
      },
    ],
  },
};

插件支持

MDX 也支持插件配置，也就是原先的 markdown 插件

比如要讓 markdown 支持表格和 checkboxList ，可以使用 remark-gfm 插件;

比如要讓 markdown 支持?jǐn)?shù)學(xué)公式可以使用 rehype-katex 插件;

在 option 中可以傳入?yún)?shù)，代碼如下：

import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'


module.exports = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // `babel-loader` is optional:
          {loader: 'babel-loader', options: {}},
          {
            loader: '@mdx-js/loader',
            /** @type {import('@mdx-js/loader').Options} */
            options: {remarkPlugins: [remarkGfm], rehypePlugins: [rehypeKatex]}}
          }
        ]
      }
    ]
  }
}

當(dāng)然也可以支持自定義插件，比如 img 要加上默認(rèn)樣式，限制其最大寬度，href 跳轉(zhuǎn)要改成新窗口打開(kāi)等，如何寫(xiě) markdown 插件可以查看 unifiedjs.com

定義組件

在支持了 mdx 之后，可以給 mdx 定義組件, 比如給 H1 傳遞默認(rèn)樣式等，或者加入默認(rèn)組件，例如 https://beta.reactjs.org/ 就加入了很多自定義組件，代碼示例如下：

import React from "react";
import ReactDom from "react-dom";
import Post from "./post.mdx"; // Assumes an integration is used

export const H1 = ({ className, ...props }: HeadingProps) => (
      className={cn(className, "text-5xl font-bold leading-tight")}
    {...props}
  />
);

const components = {
  h1: H1,
};

ReactDom.render(
  ,
  document.querySelector("#root")
);

MDX provider

每個(gè)文檔都要傳 components 很麻煩?我們可以在最外層導(dǎo)入 MDXProvider

import React from 'react'
 import ReactDom from 'react-dom'
 import Post from './post.mdx' // Assumes an integration is used to compile MDX -> JS.
 import {Heading, /* … */ Table} from './components/index.js'
+import {MDXProvider} from '@mdx-js/react'

 const components = {
   h1: Heading.H1,
   // …
   table: Table
 }

 ReactDom.render(
-  ,
+  
+    
+  ,
   document.querySelector('#root')
 )

在線運(yùn)行

以上實(shí)例都是在構(gòu)建時(shí)運(yùn)行，那么能讓 MDX 在瀏覽器運(yùn)行呢，比如未來(lái)，博客的編輯器支持 MDX，那么我們的博客文章頁(yè)面就可以有更多交互了。

比如數(shù)據(jù)通過(guò)服務(wù)端返回,下面代碼是 next.js 示例

import { useState, useEffect, Fragment } from "react";
import * as runtime from "react/jsx-runtime.js";
import { compile, run } from "@mdx-js/mdx";

export default function Page({ code }) {
  const [mdxModule, setMdxModule] = useState();
  const Content = mdxModule ? mdxModule.default : Fragment;

  useEffect(() => {
    (async () => {
      setMdxModule(await run(code, runtime));
    })();
  }, [code]);

  return ;
}

export async function getStaticProps() {
  const code = String(
    await compile("# hi", { outputFormat: "function-body" /* …otherOptions */ })
  );
  return { props: { code } };
}

實(shí)時(shí)運(yùn)行

例如：官方的 palyground，就可以實(shí)時(shí)運(yùn)行，左邊寫(xiě)代碼，右側(cè)展示文檔

官方 playground

最簡(jiǎn)單的代碼如下：

import { VFile } from "vfile";
import { evaluate, } from "@mdx-js/mdx";

const value='## header'

const file = new VFile({ basename: "example.mdx", value });

const {default:Result}=await evaluate(file, runtime);

這個(gè) Result 就是一個(gè)react 組件，如要實(shí)現(xiàn)類似功能可以參考官方 github 中的 editor.client.js。

小結(jié)

Markdown 所有程序員都愛(ài)，Markdown 在標(biāo)準(zhǔn)化、結(jié)構(gòu)化、組件化都存在硬傷，有了 MDX ，Markdown 有了富交互、內(nèi)容形態(tài)的編寫(xiě)，希望 MDX 盡早、盡快、更多的投入到的互聯(lián)網(wǎng)產(chǎn)品中，也希望 MDX 的解析也來(lái)越標(biāo)準(zhǔn)化。

當(dāng)前名稱：Mdx 讓 Markdown 步入組件時(shí)代
文章源于：http://m.fisionsoft.com.cn/article/coepcop.html