091128日志（博客园博客显示数学公式的方法！）

这两天我把 blog 的数学公式显示的支持方案修改了下。

之前采用的是 ASCIIMathML.js 的方式来支持博客页面上的数学公式显示（这里有说明），但这个方法有几个不足之处：

• 首先是 JS 脚本的大小问题，ASCIIMathML.js 这个脚本有 150K 左右，如果在 blog 中使用这个 JS 脚本的话，那么无论是否需要支持数学公式，访问者打开我的博客的页面的时候，都需要承受这 150K 的下载负担，对于网速好的访问者来说也许问题不大，但毕竟不少地方网速还不行（想起一年前十几户人共用 1M 网络的日子了，唉），所以这个脚本还是有点大了。
• 使用 ASCIIMathML.js 脚本，会将页面上的数学公式转换成 ML 标签，要求浏览器必须要有支持，FireFox 等自然是没问题，但 IE 的用户则必须安装 MathPlayer 才能“正常”查看。
• 最终产生的公式样子比较丑……

综上，感觉 ASCIIMathML.js 比较符合本机使用，嘿嘿，比如自己的 TW ……

新的方案是使用 MathTran 提供的公式转图片的服务，最初知道这个方法是因为我想在 TiddlyWiki 中使用数学公式显示，结果查到这么一篇文章，里面就有对 MathTran 的一些说明，按他说的方法试了试，确实很不错，显示的公式很漂亮。而且速度也很快。但原始的方法中有一个不足之处：必须在自己的页面中插入 <img> 标签，才能使用 mathtran 提供的脚本来转换。这很不方便，因为现在我基本上都是用 WLW 离线写文章，然后再进行发布，WLW 中直接编辑 html 代码当然是没问题的，但在“所见即所得”的编辑器中使用起来就很不爽了（你会看到文章中插入了一陀很难看的东西），如果公式的数量非常多的话，修改和编辑都不舒服，并且，评论栏要添加数学公式也不方便。要是能像 ASCIIMathML.js 那样多好啊。顺着这个想法，结合那篇文章中的作者也提到的“不过通过研究那个js可以再简化一点，直接使用端口 "http://www.mathtran.org/cgi-bin/mathtran?tex="+encodeURIComponent(expr)，省去查错的环节。”于是我照虎画猫，抄了 ASCIIMathML.js 的一些代码，自己写了一点 JS 脚本，让这个脚本寻找正文和评论中两个反单引号之间的内容，自动生成 img 标签，这样，我在 WLW 中写东西时候就可以直接在编辑窗口写公式，发布后自然会被转成图片来显示，下面是这个 JS 的脚本的代码（12月1日更新）：

// 将letax公式的文字生成一个img标签
function GenerateMathImg(formula) {
    var mi =document.createElement("img");    
    mi.src = "http://www.mathtran.org/cgi-bin/mathtran?tex=" 
        + encodeURIComponent(formula);
    mi.alt = formula;
    return mi;
}

function ProcessFormula(str, newFrag) {
    while (1) {
    // 将含有公式的文字块变换成= 文字块+公式img+文字块
        var re = str.match(/([^\`]*)\`(.*?)\`(.*)/);  
        if (re != null) {
            newFrag.appendChild(document.createTextNode(re[1]));
            newFrag.appendChild(GenerateMathImg(
                re[2].replace(/^\s+|\s+$/, '')));
            str = re[3];
        }
        else {
            newFrag.appendChild(document.createTextNode(str));
            break;
        }
    }
}

function processTextNode() {
    var nodeText = this.nodeValue;   
    if (nodeText.indexOf('`') != -1) {
        var strAry = nodeText.split("\\`");
        var newHtmlFrag = document.createDocumentFragment();
        for (var i = 0; i < strAry.length; ++i) {
            if (i > 0) {
                newHtmlFrag.appendChild(document.createTextNode("`"));
            }
            ProcessFormula(strAry[i], newHtmlFrag);            
        }
        this.parentNode.replaceChild(newHtmlFrag, this);  
    }   
    
}

function StartConvert() {
    var bConv = ($(document.body).html().indexOf('`') != -1);
    if (bConv) {
    // 找出页面上所有的text-node，对每个text-node调用processTextNode
    var allText = $(document.body).find("*").
        contents().filter(function(){
            return (this.nodeType == 3);
        }).each(processTextNode); 
    }
}

$(StartConvert)

不过现在这个脚本确实很简陋，也不知道有多少 bug，呵，先试着用着吧，等出了 bug 或是新需求再进一步调整。至少单行的公式显示应该是没有问题的，比如：

`f(x) = a_0 + \sum_{n=1}^\infty\left[a_n\cos(nx)+b_n\sin(nx)\right]`

傅立叶级数展开式，嘿嘿，:P。感觉还是不错的。嗯，美中不足的是博客模板的背景与公式图片的背景不一致，另外，如果把页面保存在本地，而又在查看的时候又不在连网状态的话，那就显示不了了（不过把脚本的代码删掉，会直接显示数学公式的，勉强可以接受吧……）。

记记别的。

编译原理的学习进展不大，上周又把词法分析复习了一遍，看语法分析的时候第一遍愣是没把上下文无关方法和 BNF 理解清楚，应该说是一头雾水，唉，真羡慕那些天才们，随手就写一个语言的编译器出来，仰望……，仰望完之后，下周继续看，读书百遍，其意自见嘛，我就不信我搞不明白它。

不过词法分析倒是理解得比较清楚了（毕竟这部分不太复杂嘛），哈哈，现在至少知道，如果要对 C/C++ 代码里的注释做些处理，用自动状态机的话其实也是很简单的。想以前用正则表达式来处理代码文件，处理的过程总是会出一些“意外”，毕竟正则表达式不懂“ C/C++ 语法”……表达能力也有限制。嗯，编译原理，继续学习，什么时候我也出个语言来玩玩，嘿嘿。