javascript - showdown.js的markdown语法高亮问题

 mobiledu2502868933 发布于 2022-11-27 10:48

我在制作个人博客,使用ajax获取markdown文件,使用showdown.js来解析markdown语法。目前进行得比较顺利,但是有一个问题,我一直没有找到我满意的语法高亮解决方案。

我尝试使用过showdown-highlight来实现语法高亮,效果也比较让人满意,只是在webpack打包的时候出现了这样的报错:

ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./~/showdown-highlight/lib/index.js:20,0]

这个比较尴尬,毕竟代码肯定是要压缩的,否则2MB的js文件加载起来实在太慢了。我尝试查阅了highlight.js的文档,没有相关的信息。

我翻阅了showdown的相关issue,看到有提供这样的解决方案:

showdown.extension('codehighlight', function() {
  function htmlunencode(text) {
    return (
      text
        .replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
      );
  }
  return [
    {
      type: 'output',
      filter: function (text, converter, options) {
        // use new shodown's regexp engine to conditionally parse codeblocks
        var left  = '
]*>',
            right = '
', 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); } } ]; });

我之前在webpack里引用是这样的:

var showdown = require('showdown'),
    showdownhighlight = require('showdown-highlight');
    
var converter = new showdown.Converter({extensions: [showdownhighlight]});

这种引用方式和issue里的解决方案有所不同,琢磨半天也没琢磨透,请问有什么更好的解决方案吗?

1 个回答
  • 结果刚提了问就找到了解决办法。。

    var converter = new showdown.Converter({extensions: 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);
          }
        }
      ];
    }()});

    比较粗暴地把后面的匿名函数当成参数传入,就可以实现了。

    2022-11-27 10:58 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有