JavaScript中的Markdown語法高亮顯示

我試圖讓rainbow語法高亮顯示庫與marked markdown渲染引擎一起工作。該marked文檔指出語法高亮通過下面的配置選項的支持：JavaScript中的Markdown語法高亮顯示

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

的rainbowsource code表明，傳入一個字符串，突出通過以下語法的支持：

Rainbow.color(code, lang, success);

我對於如何把兩者放在一起，有點不知所措。具體而言，success是一個將被異步調用的回調函數，我不能簡單地從highlight回調中的Rainbow.color代碼返回值。這將如何完成？

來源

2013-02-17 user2398029

您需要類似http://www.usbfirewire.com/uconverters.html但對於CPS轉換... – 6502 2013-02-17 22:09:16

酷。這與'$ .Deferred'有什麼關係嗎？ – user2398029 2013-02-17 22:10:28

我不這麼認爲。問題在於標記似乎需要一個同步語法高亮顯示器，並且沒有辦法在同步窗口中轉換像彩虹這樣的異步窗口（這就是爲什麼例如許多'node.js'庫函數也提供了「... Synch」版本......沒有辦法從Javascript構建一個）。請參閱http://stackoverflow.com/q/6842256/320726 – 6502 2013-02-17 22:14:53

作者在這裏標記。我前一段時間在問題追蹤器上提到過這個問題：https://github.com/chjj/marked/issues/47

使用具有標記的異步熒光筆的可能性更大。你只需要遍歷詞法分析器吐出的令牌。

這裏舉例：https://github.com/chjj/marked/issues/47#issuecomment-5297067（。請記住，這是一個例子你必須稍作修改）

我可能只是在使用上面的鏈接標記方法實現這個本身。這對使用異步熒光筆的人來說會造成性能上的打擊，但是如果你需要一個異步熒光筆，這意味着熒光筆正在做某種IO，並且你已經在使用性能。

來源

2013-02-28 02:34:04 chjj

的庫瞭解了使用所提議的方法進行工作的情況。謝謝一堆！ – user2398029 2013-02-28 04:49:29

不幸的是，沒有辦法解決這個問題。

marked似乎需要一個同步語法高亮，並且rainbow爲異步語法高亮。

在JavaScript中沒有辦法將後者轉換爲前者。

這就是爲什麼在node.js中爲許多庫函數同時存在同步和異步版本的原因。在JavaScript中沒有辦法構建一個只給予異步版的同步版本，因爲您無法創建「嵌套事件循環」（在某些情況下，相反的轉換可以使用web工作人員完成）。

將同步版本添加到rainbow（例如預先提供可能異步加載的外部資源）可能並不困難。

來源

2013-02-17 22:24:50 6502

感謝您的解釋。看起來它已經[建議]（https://github.com/ccampbell/rainbow/issues/43），但[pull request]（https://github.com/ccampbell/rainbow/pull/79）有被遺忘了。 – user2398029 2013-02-17 22:31:16

不完美的解決方案，但直到同步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的。

來源

2013-02-21 14:49:25 padakuro

你可以嘗試使用另一個突出庫，如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.

來源

2013-02-26 00:05:05 Daiz

在鉻中沒有工作 – Stoutie 2013-09-07 04:48:05

在一個燼應用程序中得到了這個工作！很甜蜜。 – Stoutie 2013-09-07 05:05:16

您的示例不起作用。 JsFiddle缺少用於標記＆Co. – 2015-04-08 15:14:50

JavaScript中的Markdown語法高亮顯示

回答

相關問題