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

栏目: IT技术 · 发布时间: 4年前

内容简介:最近试用了一些 markdown 编辑器,之前最有名的是这个东西的一个问题是不支持数学公式。幸好它的自定义能力比较强,我用首先添加一大堆依赖:

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

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

首先添加一大堆依赖:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/tomorrow.min.css">
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>

<link href="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/KaTeX/0.11.1/katex.min.js" ></script>

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>

然后引入下面函数:

<script>
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 "<p class='text-center'>" 
                + katex.renderToString(p1, {displayMode: true}) + "</p>";
        }).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) < 256) ? 1 : 2;
            }

            return len;
        }

        table = table.trim();
        if (!table) {
            return "";
        }

        var rows = table.split("\n").map(function (row) {
            row = row.split("|");
            row = row.map(function (col) {
                return col.trim();
            });

            return row;
        });

        var widths = Array(rows[0].length).fill(0);
        rows.forEach(function (row) {
            row.forEach(function (item, col) {
                widths[col] = Math.max(widths[col], strWidth(item));
            });
        });

        console.log(widths);

        rows = rows.map(function (row) {
            row = row.map(function (item, col) {
                if (widths[col] > 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);
}   
</script>

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

<script>
var mde = easymde_katex_wrap($("#textarea"));
</script>

几点说明:

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

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

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

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

Q. E. D.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

有的放矢

有的放矢

Nathan Furr、Paul Ahlstrom / 七印部落 / 华中科技大学出版社 / 2014-4-20 / 38.00元

创业需要大笔资金吗?自信的人适合创业吗?好点子究竟来自哪里?《有的放矢:NISI创业指南》的两位作者拥有多年创业与投资经验,收集了大量的一手案例和资料,提出有的放矢创业流程,帮助创业者规避创业风险,提高创业成功率。一起来看看 《有的放矢》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具