Remix中mdx?table不支持表格解決

更新時(shí)間：2023年05月06日 10:51:53 作者：?jiǎn)讨蝊x

這篇文章主要為大家介紹了Remix中mdx?table不支持表格問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

remix 配置文件中配置 mdx 屬性

remix 中支持 md/mdx 語(yǔ)法，但是 Remix 語(yǔ)法沒(méi)有內(nèi)置對(duì) markdown 表格的支持。

mdx 配置在 Remix 文檔很不明顯，從 remix 的配置文件的 .d.ts 文件。

export interface AppConfig {
    mdx?: RemixMdxConfig | RemixMdxConfigFunction;
}
export interface RemixMdxConfig {
    rehypePlugins?: any[];
    remarkPlugins?: any[];
}
export type RemixMdxConfigFunction = (filename: string) => Promise<RemixMdxConfig | undefined> | RemixMdxConfig | undefined;

添加插件 remark-gfm

Remix 通過(guò) remark 等支持 markdown 語(yǔ)法，但是默認(rèn)沒(méi)有表格等 gfm 插件支持。

npm install remark-gfm

添加配置：

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  // ...
  mdx: async (filename) => {
    const [rehypeHighlight, remarkToc, gfm] = await Promise.all([
      import("rehype-highlight").then((mod) => mod.default),
      import("remark-toc").then((mod) => mod.default),
      import("remark-gfm").then((mod) => mod.default),
    ]);
    return {
      remarkPlugins: [remarkToc, gfm],
      rehypePlugins: [rehypeHighlight],
    };
  }
};

注意：經(jīng)過(guò)嘗試，使用 exports.mdx = async (filename) {/**/} 沒(méi)有生效。下面是支持之后的效果

以上就是Remix中mdx table不支持表格解決的詳細(xì)內(nèi)容，更多關(guān)于Remix mdx table不支持表格的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

react 下拉框內(nèi)容回顯的實(shí)現(xiàn)思路
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實(shí)現(xiàn)思路是通過(guò)將下拉框選項(xiàng)的value和label一起存儲(chǔ)到state中, 初始化表單數(shù)據(jù)時(shí)將faqType對(duì)應(yīng)的label查找出來(lái)并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下
2024-05-05
基于React Native 0.52實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于React Native 0.52實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
react封裝Dialog彈框的方法
這篇文章主要為大家詳細(xì)介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn)
這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn),需要的朋友可以參考下
2017-04-04
關(guān)于react ant 組件 Select下拉框值回顯的問(wèn)題
這篇文章主要介紹了關(guān)于react ant 組件 Select下拉框值回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
簡(jiǎn)析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡(jiǎn)析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-09-09
React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個(gè)字符串按照指定的分隔符進(jìn)行分割成數(shù)組時(shí),我們可以在組件的生命周期方法中使用split方法來(lái)實(shí)現(xiàn)這個(gè)功能,本文就來(lái)介紹一下,感興趣的可以了解下
2023-10-10
React?中的?JS?報(bào)錯(cuò)及容錯(cuò)方案
這篇文章主要為大家介紹了React?中的?JS?報(bào)錯(cuò)及容錯(cuò)方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08