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测试端口的连通性的四种方法
2129 0
|
Web App开发
vscode设置默认浏览器
vscode设置默认浏览器
1064 1
|
XML 数据可视化 算法
我的Neo4j探索之旅 - 安装Apoc插件以及JAVA集成(二)
在可视化界面,输入return apoc.version() ,如果报错说明没安装对,显示如下页面,证明apoc 插件安装成功
850 0
|
安全 jenkins 持续交付
Jenkins针对不同的项目视图对不同的用户进行权限分配
Jenkins创建用户并分配不同视图的权限 根据不同的部门分配不同的角色,角色成员只能看到自己部门视图内部的jenkins job Jenkins版本:2.249 因安装了中文包的原因,语言大多以中文的方式显示,但不影响配置使用
2698 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 )的使用
|
人工智能 安全 Java
AI 应用工程化专场
本次分享的主题是AI 应用工程化专场,由Spring AI Alibaba 开源项目负责人刘军分享。 1. 初识 Spring AI Alibaba开源项目 2. Spring AI Alibaba 深入讲解 3. Spring AI Alibaba RAG 开发实践 4. Spring AI Allbaba 未来规划 5. 数据 6. 问答
767 1
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
868 5
|
监控 供应链
医院管理信息系统源代码,中小医院云HIS系统源码
HIS系统是医院信息化的核心,涵盖门诊、住院、药房、财务等模块。其功能包括患者管理、电子病历、医生工作站、护士工作站及临床诊疗等,实现从挂号收费到住院结算全流程自动化管理,提升医疗服务效率与质量。该系统通过综合管理与统计分析,优化医院运营。
734 12
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
浪漫3D圣诞树特效【附源码】Merry Christmas to My Girl !
405 1
|
JavaScript 前端开发 搜索推荐
JS经典案例-无缝滚动轮播图(纯JS)
JS经典案例-无缝滚动轮播图(纯JS)
1478 0