Remix中mdx table不支持表格解决

目录
  • remix 配置文件中配置 mdx 属性
    • 添加插件 remark-gfm

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不支持表格的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Remix 路由模块输出对象handle函数

    目录 正文 在哪里可以定义 handle? 在根路由定义 在页面 _index 路由中与 useMatch 一起 match 数组 使用场景 正文 Remix handle 函数是一个有用的对外输出的 Route 模块对象,用于暴露特定的数据 match 对象,它们经常在一起使用. 当前 Remix 版本:1.15.0 在哪里可以定义 handle? root 根组件 路由页面 在根路由定义 import { /.../ } from "@remix-run/react"; // 根路

  • Remix 后台桌面开发electron-remix-antd-admin

    目录 Remix Antd Admin Electron 项目地址 当前 Remix 版本 设计动机 Core Packages 增加左面主文件 增加 Remix 配置文件 增加 nodemon.json 核心包 国际化 图表库 裁剪工具 优点 npmrc config 使用方法 格式化工具 构建 支持 Remix Antd Admin Electron 基于 Electron/Remix/Antd/Echarts/Styled-components 的管理系统,能够快速初始化项目. 项目地址

  • Remix后台开发之remix-antd-admin配置过程

    目录 Remix Antd Admin Project experience URL Current Remix Version 设计动机 核心包 国际化 图表库 裁剪工具 Remix 优点 用法 格式化工具 支持 Remix Antd Admin 一款基于 Remix / Antd / Echarts / Styled-components 的管理系统,可快速进行项目初始化.(本项目偏前端) Project experience URL 访问地址(注意部署在 vercel):remix-ant

  • Remix路由模块输出对象loader函数详解

    目录 主要内容 loader 函数定义 loader 函数配合 useLoaderData 一起使用 loader 函数返回值 loader 函数的类型 loader 函数中获取 params loader 函数中处理 headers loader 函数上下文 loader 中重定向到 错误处理 在页面中的表现 loader 作为纯 api 输出数据使用 小结 主要内容 Remix loader 函数是一个获取当前页面页面数据的函数,经常与 useLoaderData 一起配合使用 当前 Rem

  • Remix如何支持原生 CSS方法详解

    目录 Remix CSS 语法 links 函数写法 links 函数层级 links 函数中 css 媒体查询 第三方 css import 语法 小结 Remix CSS 语法 Remix 是一个多页面的框架,对页面的原生 CSS 的支持分为两大类型: 使用 links 函数,转换成 link 标签支持 css 使用 javascript import 语法支持 css ,但是最终也会成为 link 标签 驼峰命名法 .PrimaryButton { /* ... */ } html 属性法

  • 全栈轻量级搭配之Remix Prisma Sqlite使用分析

    目录 一.为什么是 Remix/Prisma/Sqlite ? 二.Prisma 命令提前看 三.在 Remix 中添加 Sqlite 和 Prisma 的流程如下: 1.安装依赖 2.用 sqlite 初始化 prisma 3.在 Schema 文件中添加模型 4.生成客户端代码 5.使用迁移命令 6.在 studio 中查看 7.在 Remix 中使用 ①. 对外暴露 db ②. 抽象模型层 ③. 在 action/loader 中使用模型层操作数据库 ④. 额外的 seed 初始化 四.流

  • LayUi中接口传数据成功,表格不显示数据的解决方法

    今天接触这个框架发现的问题,感觉有必要注意下. LayUi 对穿过来的 Json 有严格的要求,一般情况下,要求要有4个参数,分别为: code:0 //数据状态 msg:"" //状态信息 count:1000 //数据总数 data:[] //数据列表 若传过来的 Json 包含这四个参数,且参数名一样,则表格读数据不会出问题.若参数名和上述的不一样,则需要转换下,具体方法如下: response:{ statusName: '自定义的参数名称' ,// 对应 code msgNa

  • MySQL中Union子句不支持order by的解决方法

    本文实例讲述了MySQL中Union子句不支持order by的解决方法.分享给大家供大家参考,具体如下: 我对DB知之甚少,这问题只在MySQL遇到,不知道别的DBMS是不是也如此. 问题是这样的,我打算在一个表里获得与某一行记录相邻的两行,并且想通过union一起取出来,所以这么写: select id,title from subjects where id>#some_id# order by id limit 1 union select id,title from subjects

  • 解决python pandas读取excel中多个不同sheet表格存在的问题

    摘要:不同方法读取excel中的多个不同sheet表格性能比较 # 方法1 def read_excel(path): df=pd.read_excel(path,None) print(df.keys()) # for k,v in df.items(): # print(k) # print(v) # print(type(v)) return df # 方法2 def read_excel1(path): data_xls = pd.ExcelFile(path) print(data_x

  • ant design中实现table的表格行的拖拽

    ant design中实现table的表格行的拖拽

    前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路,   然后就打开官网的文档进行观看.一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码 代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr

  • Vue中Element的table多选表格如何实现单选

    Vue中Element的table多选表格如何实现单选

    目录 Element的table多选表格实现单选 vue table单选逻辑 Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2.主要使用的是ElementUI多选表格中的方法 链接 2.1 select 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row 2.2 row-click 事件 当某一行被点击时会触发该事件 参数 row, column, event 2.3 selection-ch

  • asp.net中Table生成Excel表格的方法

    本文实例讲述了asp.net中Table生成Excel表格的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • element-ui 中的table的列隐藏问题解决

    element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条还有一段距离.所以希望能够切换到简短列可以方便的看见比较重要的几列的内容.用之前的方法<bootstrap>的话,非常简单,直接设置display的显示和隐藏就可以了. 但是放在element-ui中来就不可行了.每一列根本不能直接设置样式,你给每一列设置class-name从而设置样式的话,可能

  • 浅谈el-table中使用虚拟列表对对表格进行优化

    浅谈el-table中使用虚拟列表对对表格进行优化

    目录 前言 解决思路 具体实现 需要满足的必备条件 问题 前言 我们会经常使用表格,如果数据量大就直接可以分页,但是不可避免的会出现一些需要一页要展示很多条的情况,或者不用分页. 这个时候如果纯展示还好一点,列表里如果加上可编辑,就会变得卡的不行,点个下拉框,下拉框好久才会弹出来.这样是十分影响用户使用. 解决思路 首先我考虑是不是由于数据加载太慢导致的页面卡顿,于是我采用了滚动加载的方式,首先获取数据后,先加载100条数据.滚动的时候再加载到页面中,这样分批次加载,就会减轻首次加载数据量太大的

  • Lua中的table浅析

    Lua中的table浅析

    Lua的table提供了Map的功能,实现了"关联数组",并且整数.字符串甚至nil都可以作为索引/key:table没有固定的大小.   基于table,可以表示普通数组.符号表.集合.记录.队列和其他数据结构.   而Lua也是通过table来解决模块(module).包(package)和对象(Object)的. 例如io.read表示使用"read"来索引table io.   在Lua中,table既不是值也不是"变量",而是对象,可以

  • js操作table元素实现表格行列新增、删除技巧总结

    本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************

随机推荐