2

highlight.jsこの方法で使用する Web ページがあります。

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/vs.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Knockoutjs を使用して、次のようなスクリプト テンプレートをバインドする必要があります。

<section>
   <div data-bind="with: selectedTable">
       <div data-bind="template: { name: 'plugin-template' }"></div>
   </div>
</section>

<script type="text/html" id="plugin-template">
   <div id="plugin-view-content" data-bind="with: selectedPlugin, visible: selectedPlugin">
      <pre><code><p data-bind="text: code"></p></code></pre>
   </div>
</script>

私の問題は、テンプレートがレンダリングされるときにテキストが強調表示されないことです。どうしたの？

4

1 に答える 1

1

highlight.js のドキュメントには、動的に追加されたテキストをハイライト表示する場合に必要な方法が明確に記載されています。http://highlightjs.org/usage/の見出しの下に記載されていCustom Initializationます。

hljs.highlightBlock強調表示するコードを含む要素を渡して、関数を呼び出す必要があることを示しています。

KnockoutJS の世界では、おそらく、フィールドのテキストを変更する bindingHandler を作成してから、テキストを適切に強調表示する highlight.js メソッドを呼び出す必要があります。このような bindingHandler の単純なバージョンは、次のようになります。

ko.bindingHandlers.highlightedCode = {
    update: function(element, valueAccessor){
        var code = ko.unwrap(valueAccessor());
        element.innerText = code;
        hljs.highlightBlock(element);
    }
};

次のビュー モデルの設定が与えられた場合:

function ViewModel(code){
    var self = this;

    self.code = ko.observable(code);
}

var viewModel = new ViewModel('public static void Main()\n{\n    var name = Console.ReadLine();\n    Console.WriteLine("Hello " + name + "!");\n}');
ko.applyBindings(viewModel);

次の HTML で bindingHandler を使用できます。

<pre>
    <code data-bind="highlightedCode: code"></code>
</pre>
<textarea data-bind="value:code" rows="20" cols="100"></textarea>

ライブで試してみたい場合に備えて、このコードを含む jsfiddle を作成しました。JSFiddle はhttp://jsfiddle.net/zY52s/にあります。

于 2014-03-28T16:58:50.717 に答える