在 EasyMDE 里添加数学表达式支持和表格快速对齐

最近试用了一些 markdown 编辑器，之前最有名的是 simplemde
， 2017 年之后未更新，有人在此基础上做了个 easymde
，现在还有一些更新。

这个东西的一个问题是不支持数学公式。幸好它的自定义能力比较强，我用
Katex

给它加了数学表达式的支持。
首先添加一大堆依赖：

然后引入下面函数：

function easymdn_katex_wrap(ele, config, markedOptions) {
    markedOptions = {
        renderer: new marked.Renderer(),
        highlight: function(code, language) {
            const validLanguage = hljs.getLanguage(language) ? language : 'cpp';
            return hljs.highlight(validLanguage, code).value;
        },
        pedantic: false,
        gfm: true,
        breaks: true,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false,
        ...(markedOptions || {}),
    };

    marked.setOptions(markedOptions);

    let customMarkdownParser = function(plainText) {
        plainText = plainText.replace(/\$\$(.*?)\$\$/g, function (match, p1) {
            return "
" 
                + katex.renderToString(p1, {displayMode: true}) + "
";
        }).replace(/\$(.*?[^\\])\$/g, function (match, p1) {
            return katex.renderToString(p1, {displayMode: false});
        });

        return marked(plainText);
    };

    /// align table in markdown
    let formatTable = function (table) {
        function strWidth(str) {
            var len = 0;
            for (var i = 0; i < str.length; ++i) {
                len += (str.charCodeAt(i)  0) {
                    item = " " + item + " ".repeat(widths[col] - strWidth(item) + 1);
                }

                return item;
            }).join("|");

            return row;
        });

        return rows.join("\n");
    };

    config = {
        spellChecker: false,
        autosave: {
            enabled: false,
        },
        toolbar: [
            'bold', 'italic', 'strikethrough', 'heading-3', 'code', 'quote',
            'unordered-list', 'ordered-list', 'clean-block', 'link', 'image', '|', 'table',
        {
            name: "format_table",
            action: function (editor){
                console.log(editor);
                var selection = editor.codemirror.doc.getSelection();
                editor.codemirror.doc.replaceSelection(formatTable(selection));
            },
            className: "fa fa-align-justify",
            title: "格式化表格",
        }, 'preview', 'side-by-side', 'fullscreen', '|', 'guide',  ],


        placeholder: 'Type here...',
        tabSize: 4,
        previewRender: function(plainText, preview) { // Async method
            setTimeout(function(){
                preview.innerHTML = customMarkdownParser(plainText);
            }, 250);
        },
        ...(config || {})
    };

    return new EasyMDE(config);
}   

最后要用的时候直接调用：

var mde = easymde_katex_wrap($("#textarea"));

几点说明：

• 上述代码增加了 highlight.js
  进行代码高亮。
• easymde_katex_wrap
  函数的第二个参数为 easymde
  的可选参数，可参考 https://github.com/Ionaru/easy-markdown-editor#configuration
  。
• easymde_katex_wrap
  函数的第三个参数为 marked
  的可选参数，可参考 https://marked.js.org/#/USING_ADVANCED.md#options
  。

上面还增加了一个按钮，可以对选中的 markdown 表格代码快速对齐。简单举个例子，如果我们选中下面的表格：

| aaaa | bbb | c
|---|-|-
|x|xxxx|xx

点击快速对齐的按钮之后，将会格式化成下面的代码：

| aaaa | bbb  | c  
| ---  | -    | -  
| x    | xxxx | xx

Q. E. D.