原本是不想写这文章的,因为官方文档基本上已经很全面了,无奈自己的记性实在太差,等到用时常常连名字都忘了,索性记录下来方便自己。

一、KaTeX简介

katex.png
有时候,我们想要在网页中插入数学公式,比如上图白框中的那样,该怎么做呢?
最简单的办法就是把公式做成图片然后黏贴在网站上,但是这样一来排版就成了难事。所以最好还是同文字一样显示,但又能方便地编辑。
实际上,在文字处理领域,早就有非常成熟的排版系统LaTeX,它完全使用文本描述排版,对于复杂的数学公式、表格、化学分子式等完全不在话下,甚至可以排五线谱、棋谱、电路图等。
不过正是因为这种全面性,在仅需要展现数学公式时显得过于庞大和臃肿。
而KaTeX就是这样一个支持HTML的轻量级的数学公式引擎,它由可汗学院开发,使用起来也非常简单。

二、KaTeX安装

1. 使用npm安装

npm install katex
# or globally
npm install -g katex

2. 在html代码中引入KaTeX

引入KaTeX的JS代码与CSS样式:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.css" integrity="sha384-bsHo4/LA+lkZv61JspMDQB9QP1TtO4IgOf2yYS+J6VdAYLVyx1c3XKcsHh0Vy8Ws" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.js" integrity="sha384-4z8mjH4yIpuK9dIQGR1JwbrfYsStrNK6MP+2Enhue4eyo0XlBDXOIPc8b6ZU0ajz" crossorigin="anonymous"></script>

三、KaTeX使用

1. 插入行内公式

行内公式的插入方法如下,其中空格是留给编写公式的区域,其可以直接在段落中展现公式。

方案一:\(···\)

2. 插入行间公式

行间公式是单独自成一段展现公式,可以通过如下的方案编写公式。

方案一:$$···$$
方案二:\[···\]

比如代码x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}则显示如下公式:

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

注意:
在typecho中行内和独立的都是以2个$开头和结尾(如果希望独立居中,则可在公式前后各空一行)。

四、在线编辑器

如果不想研究太多的KaTeX语法,也可以选择在线工具帮忙,让我们事半功倍。

www.wiris.com

wiris.png
这个编辑器支持手写功能,界面漂亮,只是打开速度比较慢,不行就多刷新几次。

latex.codecogs.com

这个编辑器并不很完美,只能说把常用的数学公式代码化,然后有一个预览功能,不过还是需要你懂得一些LaTex的语法,只是相对方便很多,
latex-codecogs-eqneditor.png

花絮

写这篇文章的时候,我在考虑是否需要为了演示KaTeX的功能而去安装或者引入,最终觉得还是得不偿失,所以打算从网上截图,结果发现typecho的EditorMD插件竟然直接支持KaTeX,还支持流程图。之所以一直没有让EditorMD插件接管前台JS,主要也是因为它会令另一个目录插件MenuTree失效(这在文章中还特地备注了一下,结果时间太长自己都忘了),幸好如今EditorMD插件已经自带目录生成功能了,开启前台接管也没什么问题。

最后修改:2020 年 03 月 24 日
如果觉得我的文章对你有用,请随意赞赏