-1

showdown用于在我的博客网站上转换 Markdown 编辑器，但它不支持我需要的流程图。阅读扩展摊牌扩展，我为摊牌写了一个扩展，如下所示：

let showdown = require("showdown");
let jQuery = require("jquery");
let flowchart = require("flowchart.js");

function decodeLang(text) {
    return text
      .replace(/¨D/g, '$')
      .replace(/¨T/g, '¨')
      .trim();
}

let flowchartExt = function () {
    let matches = [];
    jQuery(document.head).append('<style>flow-container{display:block;text-align:center;}</style>');
    return [{
        type: 'lang',
        filter: function (text, converter, options) {
            return text.replace(/```\s*flow\s*\n+(((?!```)[^])+)\n+```/gm, function (wholeMatch, match) {
                matches.push(decodeLang(match));
                return '%flowchart_placeholder' + _.size(matches) + '%';
            });
        }
    }, {
        type: 'output',
        filter: function (text, converter, options) {
            if (!_.isEmpty(matches)) {
                let jqCanvas = jQuery('<div id="__canvas">').css({
                    position: 'absolute',
                    top: '-1000px',
                    left: '-1000px'
                }).appendTo(document.body);

                let chart = null;
                _.forEach(matches, function (match, i) {
                    let pattern = '%flowchart_placeholder' + (i + 1) + '%';
                    text = text.replace(new RegExp(pattern, 'g'), function () {
                        if (match) {
                            if (chart) {
                                chart.clean();
                            }
                            try {
                                chart = flowchart.parse(match);
                                chart.drawSVG('__canvas');
                                return '<flow-container>' + jqCanvas.html() + '</flow-container>';
                            } catch (e) {
                                console.log(e);
                            }
                        }
                        return match;
                    });
                });

                matches = [];
                jqCanvas.remove();
            }

            return text;
        }
    }]
};
showdown.extension('flowchart', flowchartExt);

export {showdown};

现在，我实例化它的转换器来转换流程图语法

import {showdown} from '../_wraps/markdown';

let converter = new showdown.Converter({tables: true});

makeHtml(markdown) {
    return converter.makeHtml(markdown);
}

流程图语法如下：

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```

但是它不起作用！有什么建议吗？

4

1 回答 1

-1

抱歉忘记将扩展名注册到 showdown.Converter，我认为 showdown 默认将其注册到 Converter，因为我将其注册到 showdown 对象。

let converter = new showdown.Converter({tables: true, extensions: ['flowchart']});

于 2020-06-02T02:18:58.313 回答