Highlight.js應用於knockoutjs模板

我有，以這種方式使用highlight.js網頁：Highlight.js應用於knockoutjs模板

<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>

我問題在於，當模板呈現時，文本不會突出顯示。有什麼問題？

來源

2014-03-27 gravi

highlight.js上的文檔清楚地說明了如果要突出顯示動態添加的文本，您需要如何執行。在標題Custom Initializationhttp://highlightjs.org/usage/下陳述。

它聲明您應該調用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); 
    } 
};

考慮下面的視圖模型設置：

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

：

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

我已經創建了一個包含此代碼的jsfiddle，以防您想現場試用它。你可以找到JSFiddle在http://jsfiddle.net/zY52s/

來源

2014-03-28 16:58:50

它的工作原理。謝謝 – gravi

Highlight.js應用於knockoutjs模板

回答

相關問題