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