脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Remix mdx table不支持表格

Remix中mdx table不支持表格解决

 更新时间：2023年05月06日 10:51:53   作者：乔治_x  
这篇文章主要为大家介绍了Remix中mdx table不支持表格问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

remix 配置文件中配置 mdx 属性

remix 中支持 md/mdx 语法，但是 Remix 语法没有内置对 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 通过 remark 等支持 markdown 语法，但是默认没有 表格等 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],
    };
  }
};

注意：经过尝试，使用 exports.mdx = async (filename) {/**/} 没有生效。下面是支持之后的效果

以上就是Remix中mdx table不支持表格解决的详细内容，更多关于Remix mdx table不支持表格的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React Native之prop-types进行属性确认详解

    React Native之prop-types进行属性确认详解

    本篇文章主要介绍了React Native之prop-types进行属性确认详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 关于React中的声明式渲染框架问题

    关于React中的声明式渲染框架问题

    这篇文章主要介绍了React中的声明式渲染框架,我们先讨论了命令式和声明式这两种范式的差异，其中命令式更加关注过程，而声明式更加关注结果，对React渲染框架知识感兴趣的朋友跟随小编一起看看吧
    2022-06-06
  • React高级概念之Context用法详解

    React高级概念之Context用法详解

    在React应用中，为了让数据在组件间共享，常见的方式是让它们以props的形式自顶向下传递，如果数据要在组件树不同层级共享，那么这些数据必须逐层传递直到目的地，Context如同管道，它将数据从入口直接传递到出口，使用Context能避免“prop-drilling”
    2023-06-06
  • 一文带你掌握React类式组件中setState的应用

    一文带你掌握React类式组件中setState的应用

    这篇文章主要为大家详细介绍了介绍了React类式组件中setState的三种写法以及简单讨论下setState 到底是同步的还是异步的,感兴趣的可以了解下
    2024-02-02
  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    这篇文章主要为大家介绍了React Native项目中启用Hermes引擎实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • react实现原生下拉刷新

    react实现原生下拉刷新

    这篇文章主要为大家详细介绍了react实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • React.js Gird 布局编写键盘组件

    React.js Gird 布局编写键盘组件

    这篇文章主要介绍了React.js Gird 布局编写键盘组件,Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局
    2022-09-09
  • React脚手架config-overrides.js文件的配置方式

    React脚手架config-overrides.js文件的配置方式

    这篇文章主要介绍了React脚手架config-overrides.js文件的配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react中antd文本框限制输入中文方式

    react中antd文本框限制输入中文方式

    这篇文章主要介绍了react中antd文本框限制输入中文方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • React-Native 组件之 Modal的使用详解

    React-Native 组件之 Modal的使用详解

    本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论