让docsify-katex支持化学公式mhchem扩展

在使用docsify构建Markdown文档时，如果想要支持数学公式，可以使用docsify-katex插件，但是该插件不支持化学公式mhchem扩展，比如下面的代码：

\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}

正常显示应该为：

docsify-katex已经很久没更新了，最新的katex已经支持mhchem扩展。为了让docsify-katex也支持mhchem扩展，需要做如下修改：

首先引入mhchem扩展

import 'katex/contrib/mhchem/mhchem';

由于mhchem扩展的语法格式中包含有美元符号，与行内公式使用的标记一样，所以需要先处理掉块内的美元符号：
再定义：

const blockDollar = '!!blockDollar!!';
const blockDollarRegx = /!!blockDollar!!/g;

再把处理公式块内的美元符号处理掉：
将hook.beforeEach函数如原代码：

// Block
.replace(/(\$\$)([\s\S]*?)(\$\$)/g, function (a, b, c) {return preMathBlockOpen + c + preMathBlockClose;
})

改为：

// Block
.replace(/(\$\$)([\s\S]*?)(\$\$)/g, function (a, b, c) {let x = c.replace(/\$/g, blockDollar)return preMathBlockOpen + x + preMathBlockClose;
})

再修改hook.afterEach函数中原代码：

mathRendered = mathRendered.replace(preMathBlockRegex,function (m, code) {let rendered = katex.renderToString(code, blockOptions);return rendered;}
);

修改为：

mathRendered = mathRendered.replace(preMathBlockRegex,function (m, code) {code = code.replace(blockDollarRegx, '$')let rendered = katex.renderToString(code, blockOptions);return rendered;}
);

即可。
修改好源码后，编译，使用新编译的js代码即可。

附上修改后的源码：

import 'katex/contrib/mhchem/mhchem';
import katex from 'katex';let options = {throwOnError: false,displayMode: false
};
let blockOptions = {throwOnError: false,displayMode: true
};const magicEscapedDollar = 'c194a9eb';
const magicEscapedDollarRegex = /c194a9eb/g;
const magicBacktickInCodeTag = 'c194a9ec';
const magicBacktickInCodeTagRegex = /c194a9ec/g;
const magicBacktickInDollars = 'c194a9ed';
const magicBacktickInDollarsRegex = /c194a9ed/g;
const magicEscapedBacktick = 'c194a9ee';
const magicEscapedBacktickRegex = /c194a9ee/g;
const magicDollarInBacktick = 'c194a9ef';
const magicDollarInBacktickRegex = /c194a9ef/g;const preMathInlineOpen = 'c194a9eg<!-- begin-inline-katex';
const preMathInlineClose = 'end-inline-katex-->';
const preMathInlineRegex = /c194a9eg<!-- begin-inline-katex([\s\S]*?)end-inline-katex-->/g;const preMathBlockOpen = '<!-- begin-block-katex';
const preMathBlockClose = 'end-block-katex-->';
const preMathBlockRegex = /<!-- begin-block-katex([\s\S]*?)end-block-katex-->/g;const blockDollar = '!!blockDollar!!';
const blockDollarRegx = /!!blockDollar!!/g;(function () {function install(hook) {hook.beforeEach(content => {let mathPreserved = content// Escape all <code>`</code>.replace(/<code>(.*)<\/code>/g, function(a, b) {return `<code>${b.replace(/`/g, magicBacktickInCodeTag)}</code>`;})// Escape all $`$.replace(/\$`\$/g, magicBacktickInDollars)  // Escape all \`{.replace(/\\`\{/g, magicEscapedBacktick)// Escape all \$.replace(/\\\$/g, magicEscapedDollar)// Escape all & in `...`.replace(/(`{1,})([\s\S]*?)\1/g, function (a) {return a.replace(/\$/g, magicDollarInBacktick);})// Recover all <code>`</code>.replace(magicBacktickInCodeTagRegex, '`');mathPreserved = mathPreserved// Recover all $`$.replace(magicBacktickInDollarsRegex, '$ `$')// Recover all \`{.replace(magicEscapedBacktickRegex, '\\`{');mathPreserved = mathPreserved// Block.replace(/(\$\$)([\s\S]*?)(\$\$)/g, function (a, b, c) {let x = c.replace(/\$/g, blockDollar)return preMathBlockOpen + x + preMathBlockClose;})// Inline, no \$.replace(/(\$)([\s\S]*?)(\$)/g, function (a, b, c) {return preMathInlineOpen + c.replace(magicEscapedDollarRegex, '\\$') + preMathInlineClose;}).replace(magicEscapedDollarRegex, '\\$');return mathPreserved;});hook.afterEach(function (html, next) {let mathRendered = html.replace(preMathInlineRegex,function (m, code) {let rendered = katex.renderToString(code, options);return rendered;});mathRendered = mathRendered.replace(preMathBlockRegex,function (m, code) {code = code.replace(blockDollarRegx, '$')let rendered = katex.renderToString(code, blockOptions);return rendered;});next(mathRendered// Recover all & in `...`.replace(magicDollarInBacktickRegex, '$'));});}$docsify.plugins = [].concat(install, $docsify.plugins);
}());

让docsify-katex支持化学公式mhchem扩展相关推荐

JS配置KaTeX渲染LaTeX公式
一.前言 LaTeX\LaTeXLATEX公式在许多技术性网站中很有用,尤其是论坛类网站--支持LaTeX语法能使用户体验大大提高. 例如(摘自Demo KaTeX与Mathjax的比较): 1(ϕ ...
如何在latex中labelfont?_如何高效优雅地录入化学公式（Anki）
怎么再Anki中录入无机化学公式?插入图片这种选择即占空间又不够清晰还在夜间模式下反人类.幸运的是,Anki还支持latex,能够呈现出矢量(无限放大依旧清晰)的公式图. 不过,latex的书写还是较 ...
对Java的URL类支持的协议进行扩展的方法
转载自对Java的URL类支持的协议进行扩展的方法 JAVA默认提供了对file,ftp,gopher,http,https,jar,mailto,netdoc协议的支持.当我们要利用这些协议来 ...
visual basic开发实例大全(基础卷_2021中考数学、物理、化学公式大全！建议收藏！...
点击蓝字关注我们初中的学习在于建立一个对学科的基本认识,也为之后高中的学习打好基础.对于令人焦头烂额的理科而言,其中也有规律可以寻找--公式,就是将精华知识压缩成简单的句子和符号. 在公式里,我们 ...
化学公式编辑器怎么画聚合物？
化学是一门抽象的学科,如果仅依靠课本上的理论介绍,是无法理解其实验本质的.尤其是对于化学分子结构,如果能将其分子结构图展现给学生们观看,那将有助于学生们理解.所以在讲课时,老师们可以借助专业的化学公式 ...
第2章第16节：如何在幻灯片中插入化学公式 [PowerPoint精美幻灯片实战教程]
本节演示如何在幻灯片中插入化学公式,主要用于制作教育领域的演示文稿.首先点击插入选项卡,显示插入功能面板. 点击符号下拉箭头,打开符号功能面板. 点击公式选项,往幻灯片中插入公式. 此时进入公式设计模 ...
表白套路计算机公式,化学公式的超酷表白九个学科专属表白句子
以前很多人觉得恋爱是学渣的事情,现在却有很多学霸收获了甜甜的爱情.比起简简单单的我喜欢你,现在的年轻人更喜欢复杂的表白句子.那化学公式的超酷表白句子有哪些呢?一起来看看九个学科的专属表白句子吧! 一. ...
索尼android sd卡上,16GB内存支持microSD卡存储扩展_索尼 Xperia SP_手机Android频道-中关村在线...
索尼M35t的设计很有自己的特色,不同于索尼今年的旗舰机型线条那么犀利,也不同于去年索尼主打的arc曲线设计.方正的边框搭配略有弧度的后盖,持握时倒也足够贴合手掌.加之手机后盖通过喷涂带来了近似橡胶的 ...
图片转换为 latex 公式，识别图片中Latex公式，支持数学公式，化学公式，物理公式和生物公式，附Java代码和测试效果
目录 1.编写Java代码实现识别图片中Latex公式 2.测试结果 3.源码下载 1.编写Java代码实现识别图片中Latex公式直接上代码: public static String se ...

让docsify-katex支持化学公式mhchem扩展

让docsify-katex支持化学公式mhchem扩展相关推荐

最新文章

热门文章