5

レインボーシンタックスハイライトライブラリをマークダウンレンダリングエンジンで動作させるようにしています。markedドキュメントには、構文ハイライトは次の構成オプションでサポートされていると記載されています。

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

rainbow ソースコードは、強調表示する文字列の受け渡しが次の構文でサポートされていることを示しています。

Rainbow.color(code, lang, success);

2つを組み合わせる方法について少し戸惑っています。具体的にsuccessは、非同期で呼び出されるコールバックであり、コールバックRainbow.color内のコードから値を単純に返すことはできませんhighlight。これはどのように達成されますか？

4

4 に答える 4

8

ここにマークの作者。少し前に課題追跡システムでこれに対処しました：https ：//github.com/chjj/marked/issues/47

マーク付きの非同期蛍光ペンを使用することは可能です。レクサーが吐き出すトークンを繰り返す必要があります。

ここでの例：https ：//github.com/chjj/marked/issues/47#issuecomment-5297067 （これは例であることに注意してください。少し変更する必要があります。）

上記のリンクのメソッドを使用して、マーク付きでこれをネイティブに実装することができます。非同期蛍光ペンを使用している人にとってはパフォーマンスが低下しますが、非同期蛍光ペンが必要な場合は、蛍光ペンが何らかのIOを実行していて、すでにパフォーマンスが低下していることを意味します。

于 2013-02-28T02:34:04.040 に答える
4

あなたはhighlight.jsのような別のハイライトライブラリを使ってみることができます-それはあなたがこのようにブラウザで使うことができる同期ハイライトメソッド（hljs.highlight(lang, code).valueと）を持っています：hljs.highlightAuto(code).value

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

これが実際のJsFiddleの例です。

于 2013-02-26T00:05:05.093 に答える
2

残念ながら、問題を解決する方法はありません。

marked同期シンタックスハイライトが必要なようrainbowで、非同期シンタックスハイライトです。

Javascriptでは、後者を前者に変換する方法はありません。

node.jsこれは、たとえば、多くのライブラリ関数に同期バージョンと非同期バージョンの両方がある理由です。「ネストされたイベントループ」を作成できないため、Javascriptでは非同期のものだけを指定して同期のものを構築する方法はありません（場合によっては、代わりにWebワーカーを使用して逆の変換を行うことができます）。

同期バージョンをに追加することは難しくないかもしれませんrainbow（たとえば、非同期でロードしている可能性のある外部リソースを事前に提供することによって）。

于 2013-02-17T22:24:50.070 に答える
1

完璧なソリューションではありませんが、同期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-21T14:49:25.827 に答える