showdown highlightjs扩展

Question

我正在尝试用AngularJS编写一个标记编辑器。我正在使用angular-markdown (AngularJS Showdown包装器)来解析markdown，并且我想使用highlight to来突出显示代码块。我已经编写了以下Showdown扩展：

/* global
    hljs,
    Showdown
*/

(function() {
    'use strict';

    Showdown.extensions.hljs = function(converter) {
        return [
            {
                type: 'lang',
                filter: function(text) {
                    return text;
                    var m = /([`]{3}[\S\s]*[`]{3})/gm.exec(text);
                    if(!m) {
                        return text;
                    }
                    for(var i in m) {
                        if(isNaN(i)) {
                            continue
                        }
                        var match = m[i];
                        var lang = match.replace(
                            /([`]{3})([\s\S]*)(\n){1}([\s\S]*)([`]{3})/gm,
                            '$2');
                        var code = match.replace(
                            /([`]{3})([\S\n]*)(\n){1}([\s\S]*)([`]{3})/gm,
                            '$4');
                        var hl;
                        try {
                            var hl = hljs.highlight(lang, code);
                        } catch(e) {
                            var hl = hljs.highlightAuto(code);
                        }
                        text = text.replace(match, '<pre>' + hl.value + '</pre>');
                    }
                    return text;
                }
            }
        ];
    };
}());

然而，这并不是完美的。第一个代码片段之后的文本也会嵌套并突出显示。

我已经创建了一个plunkr here。相关代码在js/angular-markdown-hljs.js中。

我的问题是:我如何才能让它工作？

Answer 1

使用新的展示会的扩展RegExp引擎，使用https://highlightjs.org/为代码突出显示创建一个扩展将会很容易。

这是最新一次对决的代码示例。

showdown.extension('codehighlight', function() {
  function htmlunencode(text) {
    return (
      text
        .replace(/&/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
      );
  }
  return [
    {
      type: 'output',
      filter: function (text, converter, options) {
        // use new shodown's regexp engine to conditionally parse codeblocks
        var left  = '<pre><code\\b[^>]*>',
            right = '</code></pre>',
            flags = 'g',
            replacement = function (wholeMatch, match, left, right) {
              // unescape match to prevent double escaping
              match = htmlunencode(match);
              return left + hljs.highlightAuto(match).value + right;
            };
        return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
      }
    }
  ];
});