VuePress@next 使用数学公式插件

这篇具有很好参考价值的文章主要介绍了VuePress@next 使用数学公式插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

VuePress@next 使用数学公式插件

搞了一个VuePress1.0的 现在升级了一下,但是使用数学公式的插件老报错啊!经过不懈努力,终于搞定了。现在记录一下。

2.0不想看前面的请直接异步到后面 2.0中一个最简单的配置后来发现的

VuePress 介绍

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

遇到的问题

使用数学公式的库,根据网上找的 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3,这些都可以,然而当我使用了之后没有一个有用的,报错信息(Error: Dynamic require of "markdown-it-mathjax3" is not supported)详细的参见后面的哦!

此时我的配置:

export default defineUserConfig({
  base: '',
  lang: 'zh-CN',
  title: '',
  description: description,
  head: head,
  theme: defalutThemeOK,
  markdown: {
    code: {
      lineNumbers: false,
    }
  },
  extendsMarkdown: (md) => {
    md.use(require('markdown-it-mathjax3')); // 使用这个解析 数学公式
    md.linkify.set({ fuzzyEmail: false });
  }, 
})

报错信息

⠋ Initializing and preparing dataerror error in hook extendsMarkdown from user-config
✖ Initializing and preparing data - failed in 33ms
Error: Dynamic require of "markdown-it-mathjax3" is not supported
    at file:///F:/StevenBlogs/docs/.vuepress/config.ts.166cda46.mjs:7:9
    at Object.extendsMarkdown [as hook] (file:///F:/StevenBlogs/docs/.vuepress/config.ts.166cda46.mjs:161:12)
    at Object.process (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:683:37)
    at async resolveAppMarkdown (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:160:3)
    at async appInit (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:604:18)
    at async file:///F:/StevenBlogs/node_modules/@vuepress/cli/dist/index.js:489:7
    at async file:///F:/StevenBlogs/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///F:/StevenBlogs/node_modules/@vuepress/cli/dist/index.js:488:5)

VuePress 2 成功配置

通过各种尝试,和搜各种资料。最后算是我搞定了。

主要是参考了Maikdown It 插件的文章"@mdit/plugin-katex"[https://mdit-plugins.github.io/zh/katex.html]

  1. 卸载之前没有用的包,我用的npm;

  2. 安装新的包"@mdit/plugin-katex" npm install @mdit/plugin-katex

  3. 修改配置;

    import { katex } from '@mdit/plugin-katex'
    
    export default defineUserConfig({
        // …… 省略了没有必要的
        extendsMarkdown: (md) => {
            md.use(katex);
            md.linkify.set({ fuzzyEmail: false });
        }, 
        })
    
  4. 还需要在head加样式,要不然样式就走样子了。参考KaTeX

    export const head : HeadConfig[]=
    [
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['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支持数学公式
    ]
    

四步骤搞定:看看效果!

VuePress@next 使用数学公式插件

VuePress@next 使用数学公式插件

找了的一些文说明的

markdown-it-mathjax3 issues all closed
markdown-it-mathjax3 issues 57
渲染数学公式 顺便说一下这个里面有1.0的配置

1.0 VuePress 的配置

以下是我的1.0的配置,在本地运行也是正常的!

module.exports = {
    head: [
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css' }],      // 让md支持数学公式
        ['link', { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css" }]  // 让md支持数学公式
    ],
    themeConfig: {
        plugins: [
        '@vuepress/plugin-back-to-top',
        '@vuepress/plugin-medium-zoom',
        ],
        extendMarkdown(md){  // 让md支持数学公式 npm install markdown-it-katex
            md.set({html:true});
            md.use(require('markdown-it-katex'));
        }
    }
}

2.0中一个最简单的配置后来发现的

在这个Markdown增强看到的,里面有很多插件,除了数学公式还有流程图等等一堆。我是在看流程图的时候发现的哦。来看怎么用。

  1. 安装插件包 npm i -D vuepress-plugin-md-enhance
  2. 按照以下代码修改config.ts,具体的可以看文档说明
// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // 使用 KaTeX 启用 TeX 支持
      katex: true,
      // 使用 mathjax 启用 TeX 支持
      mathjax: true,
    }),
  ],
};

总结

通个这个的搞定,那么使用其他Markdown It 插件都可以去这个网站找https://mdit-plugins.github.io/zh/,然后自己改改就能轻松融入了!还是的多琢磨!

另外提一下我搞到github上的网站! haha文章来源地址https://www.toymoban.com/news/detail-609516.html

到了这里,关于VuePress@next 使用数学公式插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Markdown常用数学公式

    很多情况下,markdown编辑器都自带latex的公式解析功能 标题 # 一级标题,## 二级标题,### 三级标题 插入图片 ![图片的替代文字](图片的地址) 插入链接 [链接名称](链接地址) 区块(引用) markdown(在段落的开头使用) 插入流程图,UML,甘特图,流程图等 更多具体基本语法可参见:

    2023年04月09日
    浏览(32)
  • markdown编写数学公式

    在计算机这一块,我们肯定会接触到数学,数学中又包含很多公式,但是到现在,手写这些公式应该不陌生,但是如果让你电脑敲出来,你绝对很懵逼,这也造成了我们有时候写笔记时一些公式没办法在电脑上像我们手写一样灵活,今天在这里分享给大家使用markdown描述公式

    2024年02月16日
    浏览(38)
  • LSTM数学计算公式

    LSTM(长短期记忆网络)是一种循环神经网络(RNN)的变体,常用于处理时间序列相关的任务。下面将简要介绍LSTM的数学推导和公式模型。 在训练一般神经网络模型时,通常用 ,其中W为权重,X为输入,b为常数。 LSTM包含三个门,每个都需要一次类似上面的计算,除此之外还需

    2024年02月11日
    浏览(35)
  • Latex数学公式排版

    The not so short introduction to latex各种语言版本下载地址 空格和分段: 空格键和Tab 键输入的空白字符视为“空格”。连续的若干个空白字符视 为一个空格。一行开头的空格忽略不计 多个空行被视为一个空行。也可以在行末使用 par 命令分段。 注释: % 特殊字符: # $ % 等等,均需转义

    2023年04月23日
    浏览(43)
  • 【Latex 写作】数学公式

    单层分式: 分子 over 分母 。如: 编译为 a + 1 b + 1 a+1 over b+1 b + 1 a + 1 ​ 多层分式: frac {分子} {分母} 。如: 编译为 a b + 1 c + 2 d + 4 + 8 frac {frac ab +1} {frac {c+2}{d+4} +8} d + 4 c + 2 ​ + 8 b a ​ + 1 ​ 根式: sqrt [根指数] {被开方数} ,缺省根指数时默认为 2。如: 编译为 x + y

    2024年02月08日
    浏览(59)
  • 数学_矩阵向量求导公式相关

    目录 一. 向量变元的实值标量函数  1、四个法则  2、几个公式 二. 矩阵变元的实值标量函数  1、四则运算  2、几个公式  求导公式 参考:矩阵分析与应用 张贤达 第五章 梯度分析和最优化 P271 本节 证明过程 参考:矩阵求导公式的数学推导(矩阵求导——基础篇) - 知乎

    2024年01月25日
    浏览(42)
  • 方差分析的数学原理与公式讲解

    方差分析是一种统计分析方法,它用来检验两个或多个样本来自同一总体的假设。它可以用来比较不同小组间的平均值差异是否显著。方差分析有一些假设,包括: 样本是随机选取的 样本是独立的 样本来自同一总体,且总体服从正态分布 方差分析的基本公式如下: 总平方

    2024年02月12日
    浏览(47)
  • 【数学】n次方差公式及证明方法

    n次方差公式: a n − b n = ( a − b ) ( a n − 1 + a n − 2 b + a n − 3 b 2 + ⋅ ⋅ ⋅ + a b n − 2 + b n − 1 ) , n ∈ N ∗ a^{n}-b^{n}=(a-b)(a^{n-1}+a^{n-2}b+a^{n-3}b^{2}+···+ab^{n-2}+b^{n-1}),n in N^{*} a n − b n = ( a − b ) ( a n − 1 + a n − 2 b + a n − 3 b 2 + ⋅ ⋅ ⋅ + a b n − 2 + b n − 1 ) , n ∈ N ∗ 证

    2024年02月12日
    浏览(48)
  • 管理类联考——数学——知识篇——公式——最难记

    a 3 ± b 3 = ( a ± b ) ( a 2 ∓ a b + b 2 ) a^3±b^3=(a±b)(a^2∓ab+b^2)

    2024年02月12日
    浏览(37)
  • 【ACM组合数学 | 错排公式】写信

    题目链接:https://ac.nowcoder.com/acm/contest/54484/B 题意很简单,但是数据范围偏大。 首先来推导一下错排公式: [D(n) = n!sum_{k=0}^{n}frac{(-1)^k}{k!}] 设一个函数: [S_i表示一个排列中p_i = i的方案数] 那么我们可以知道: [D(n) = n! - |cup_{i=1}^{n}S_i|] 这个表示 所有方案数 减去 至少有

    2023年04月17日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包