Jul 4

用mathjax做了一个公式显示工具

题记:前端猿正在学习进化过程中….

今天下午练习了一下javascript, 做了一个页面,写篇文章纪念一下.

不许无聊

今天下午不知道怎么的(还不是因为无聊?)就萌生出了用javascript写一个基于mathjax的公式显示工具的想法.

作品的目标

让用户输入公式代码,然后通过mathjax脚本将代码渲染显示出来.

使用mathjax

调用mathjax脚本很简单,谷歌一下到处都是,不过我还是贴一下html的引用代码.

1	<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" id="MathJax"></script>

这个东西是我在折腾jekyll搭建博客的时候学会的,当时使用的jekyll主题作者没有将mathjax添加到主题里面,于是我自己把mathjax折腾进去了.然后就学会了这个方法.

将这句脚本引用到html文档中,如果html页面里面出现了mathjax认可的公式代码,那么这个脚本就会自动把公式渲染.

我的处理

上面的方法是同步加载mathjax脚本,就是在页面加载的时候就加载mathjax,这显然不符合我的要求,我需要在用户输入代码之后再进行公示的渲染.

所以我就想到了我上次折腾博客的时候学到的异步加载脚本的方法,于是我想先让用户输入代码,然后把代码添加到html文档中,然后通过按钮来加载mathjax脚本进行公式渲染.

大致思路是这样的:

现在页面里面放一个文本框,让用户输入公式代码,
然后把代码写入html文档的特定区域,
最后用mathjax的脚本将公式代码渲染成公式,

其实思路就是这么简单.然后…我就开始做了..然而我还是花了将近一个多小时.真菜,这点东西就花了一个小时.

关于异步加载

异步加载js的方法有很多,这里我选取了酷壳的这篇文章里面的一段代码(一个函数).(汗,其实这个函数我自己是写的出来的, 感觉我好懒)

还是贴一下js代码吧.

function loadjs(script_filename) {
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', script_filename);
    script.setAttribute('id', 'coolshell_script_id');
    script_id = document.getElementById('coolshell_script_id');
    if(script_id){
        document.getElementsByTagName('head')[0].removeChild(script_id);
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}

缺点

这个页面还是有缺点的,就是无法实时显示代码,暂时还没有想到好的办法(好吧,我太菜了),所以只能在每次渲染完了之后刷新页面之后才能再次使用.

于是我就设置成了三个按钮, 一个按钮添加代码, 一个按钮显示公式, 一个按钮刷新页面.

然后把按钮设置成:

按下了显示公式按钮之后显示刷新按钮(其实是用js代码在html文档里面write了一个按钮).
刷新按钮出现之后把添加按钮和渲染按钮隐藏掉(其实是删除掉了).

后续想法

这个页面还是太简单了,如果以后有时间再慢慢添加元素.

例如可以加上对公式进行管理的功能:

编辑指定的公式
删除指定的公式

还可以做一下界面,这个想法也不错.

最重要的是,我想做到实时显示代码,不过似乎现在的水平还不够.

效果展示

好吧,这是我作品的最后效果.(吐槽:测试的代码忘记删除了,不过这样也好)

效果展示

这只是一次练习,所以就懒得做页面的样式了,这里是demo.

我把这个html代码托管在github上面,这里是代码仓库.

题外话

这个代码仓库应该是我以后所有的html作品的家了, 现在里面有另外一个作品.

那是我在很早之前在慕课网学照片的瀑布流布局的时候随堂写的一个页面,用的也是js.

这里是demo地址,这个东西如果有后端支持还是蛮漂亮的, 没有后端的话, 我不知道怎么动态的添加不同的图片.

我突然有一个炒鸡不错的想法,可以把我前面写的那个python爬虫用上:

使用爬虫抓取图片地址,
然后用nodejs或者python做一个后端,
把爬虫爬到的照片通过瀑布流展示出来,
最后再把后台放到我的vps上面去,一切是如此的美好.

嗯,期末考试完了之后有时间就去折腾.