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