声明：本教程是在主题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对代码的支持度，