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

回答

相关问题