VuePress 数学公式支持

简介: VuePress 数学公式支持

前言

博主在为 VuePress1.0 博客添加数学公式支持过程中遇到如下问题

### 问题一

在配置诸如 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3 这些插件后遇到

Error: Dynamic require of "XXX" is not supported

问题二

配置插件 vuepress-plugin-mathjax 成功,但是我发现此插件并不支持多行公式(也有可能是因为我的公式有错误,导致全部渲染失败,同样不符合要求)

方案

安装

npm install @mdit/plugin-katex

配置

VuePress 1.0 配置

import { katex } from '@mdit/plugin-katex'

export default defineConfig4CustomTheme<VdoingThemeConfig>({
    markdown: {
        extendMarkdown: (md) => {
          md.use(katex);
          md.linkify.set({ fuzzyEmail: false });
        },
  },    
})

VuePress 2.0 配置

import { katex } from '@mdit/plugin-katex'

export default defineUserConfig({
    extendsMarkdown: (md) => {
        md.use(katex);
        md.linkify.set({ fuzzyEmail: false });
    }, 
})
注意:博主使用博客主题为 Vdoing,上述配置中某些代码和读者不同,请自行更改

样式

head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css",
      },
    ], // 让md支持数学公式
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js",
      },
    ], // 让md支持数学公式
]

推荐阅读

[Markdown 增强插件]

参考文章

VuePress@next 使用数学公式插件

目录
相关文章
|
网络协议 Linux 网络安全
Linux测试端口的连通性的四种方法
Linux测试端口的连通性的四种方法
1582 0
|
Web App开发
vscode设置默认浏览器
vscode设置默认浏览器
788 1
|
XML 数据可视化 算法
我的Neo4j探索之旅 - 安装Apoc插件以及JAVA集成(二)
在可视化界面,输入return apoc.version() ,如果报错说明没安装对,显示如下页面,证明apoc 插件安装成功
763 0
|
安全 jenkins 持续交付
Jenkins针对不同的项目视图对不同的用户进行权限分配
Jenkins创建用户并分配不同视图的权限 根据不同的部门分配不同的角色,角色成员只能看到自己部门视图内部的jenkins job Jenkins版本:2.249 因安装了中文包的原因,语言大多以中文的方式显示,但不影响配置使用
2519 0
Jenkins针对不同的项目视图对不同的用户进行权限分配
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
762 5
|
监控 供应链
医院管理信息系统源代码,中小医院云HIS系统源码
HIS系统是医院信息化的核心,涵盖门诊、住院、药房、财务等模块。其功能包括患者管理、电子病历、医生工作站、护士工作站及临床诊疗等,实现从挂号收费到住院结算全流程自动化管理,提升医疗服务效率与质量。该系统通过综合管理与统计分析,优化医院运营。
631 12
|
API iOS开发 开发者
Snapchat API 访问:Objective-C 实现示例
Snapchat API 访问:Objective-C 实现示例
271 11
|
负载均衡 安全 Java
Java一分钟之-WebSocket:实时通信协议
【6月更文挑战第1天】WebSocket是实现客户端与服务器长连接、双向通信的协议,简化实时数据传输。Java中的WebSocket实现基于JSR 356。本文涵盖WebSocket基础(持久连接、双向通信、低延迟)、工作流程、常见问题(安全、连接管理、数据编码)及Java实现示例,强调错误处理、心跳机制和资源管理的最佳实践。
963 6
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
338 1