声明:本教程是在主题butterfly 4.1.0上进行测试的,该主题提供了现成的引用接口,对于其他主题可以参考这篇文章实现。

3月18日更新:由于此js影响了页面的加载速度,(在所有页面中都加载了此js文件)现在将其关闭,下面例子不会显示是正常情况


Tikzjax是一个遵循tikz语法,并将其并转化成相应svg图的项目,本文将采用此项目的js代码实现目的。

前置

在butterfly主题的配置文件中有引用接口,head下面可以添加css文件引用,bottom下可以添加js文件引用。

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>

调用

下载tikzjax.js文件到/themes/butterfly/source/js/tikzjax.js,可以在github里下载,也可以在此处📄下载

在配置文件在添加引用

1
2
3
4
5
6
...
head:
<link rel="stylesheet" type="text/css" href="http://tikzjax.com/v1/fonts.css">
bottom:
- <script type="text/javascript" src="/js/tikzjax.js"></script>
...

使用

不出意外的话,现在就在文章中写tikz代码了🎉,就像下面这样:

1
2
3
4
5
6
7
8
9
10
### 画一个圆

```
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\end{tikzpicture}
</script>
```

下面举几个例子:

官方Demo

在这里你也可以测试一下tikzjax对代码的支持度,