Question

我正在尝试在AngularJS中编写降价编辑器。我使用angular-markdown（AngularJS Showdown包装器）来解析markdown，我想使用highlightjs突出显示代码块。我写了以下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

使用https://highlightjs.org/进行代码突出显示的扩展程序对于新的showdown扩展的RegExp引擎来说会很容易。

这是最新摊牌的代码示例。

showdown.extension('codehighlight', function() {
  function htmlunencode(text) {
    return (
      text
        .replace(/&amp;/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);
      }
    }
  ];
});

showdown highlightjs扩展名

1 个答案: