JavaScript中的Markdown语法高亮显示

Question

我试图让rainbow语法高亮显示库与marked markdown渲染引擎一起工作。该marked文档指出语法高亮通过下面的配置选项的支持：

marked.setOptions({ 
    highlight: function(code, lang) { 
    return highlighter.javascript(code); 
    } 
}); 

的rainbowsource code表明，传入一个字符串，突出通过以下语法的支持：

Rainbow.color(code, lang, success); 

我对于如何把两者放在一起，有点不知所措。具体而言，success是一个将被异步调用的回调函数，我不能简单地从highlight回调中的Rainbow.color代码返回值。这将如何完成？

Answer 1

作者在这里标记。我前一段时间在问题追踪器上提到过这个问题：https://github.com/chjj/marked/issues/47

使用具有标记的异步荧光笔的可能性更大。你只需要遍历词法分析器吐出的令牌。

这里举例：https://github.com/chjj/marked/issues/47#issuecomment-5297067（。请记住，这是一个例子你必须稍作修改）

我可能只是在使用上面的链接标记方法实现这个本身。这对使用异步荧光笔的人来说会造成性能上的打击，但是如果你需要一个异步荧光笔，这意味着荧光笔正在做某种IO，并且你已经在使用性能。

Answer 2

不幸的是，没有办法解决这个问题。

marked似乎需要一个同步语法高亮，并且rainbow为异步语法高亮。

在JavaScript中没有办法将后者转换为前者。

这就是为什么在node.js中为许多库函数同时存在同步和异步版本的原因。在JavaScript中没有办法构建一个只给予异步版的同步版本，因为您无法创建“嵌套事件循环”（在某些情况下，相反的转换可以使用web工作人员完成）。

将同步版本添加到rainbow（例如预先提供可能异步加载的外部资源）可能并不困难。

Answer 3

不完美的解决方案，但直到同步API已并入rainbow.js我用下面的代码解决了这个问题：

// ... after marked() has converted the markdown to html 
// (the highlight option of marked should be unchanged!) 

// find all <code> elements and go through each 
$('body') 
    .find('code') 
    .each(function() { 
      var $code = $(this), 
       cls = $code.attr('class'), 
       language; 

      // no language information at all 
      if(typeof cls === 'undefined') { 
       return; 
      } 

      // actually we should also check if a valid "lang-" class 
      // (which is by default set through marked) is given 
      language = cls.split('-')[1]; 

      // add the data-language to the <code> element 
      $code.data('language', language); 
     }); 

// let the rainbows shine 
Rainbow.color(); 

这将运行客户端，并使用jQuery的。

Answer 4

你可以尝试使用另一个突出库，如highlight.js - 它具有同步高亮方法（hljs.highlight(lang, code).value和hljs.highlightAuto(code).value），您可以在浏览器中使用像这样的：

marked.setOptions({ 
    highlight: function(code) { 
    return hljs.highlightAuto(code).value; 
    } 
}); 

Here's a working JsFiddle example.