我正在尝试为动态添加的 html 中的所有代码元素获取语法突出显示,该 html 将使用 ng-bind-html 添加到当前页面。
<div ng-repeat="activity in activities">
<h3>{{activity.title}}</h3>
<div ng-bind-html="activity.text">
</div>
</div>
activity.text
变量包含如下内容:
<p>This is a paragraph with some code following.</p>
<pre><code class="lang-python">
s = "Python syntax highlighting"
print s
</code></pre>
<p>some other HTML elements </p>
到目前为止,这有效,但没有语法突出显示。所以我添加了highlightjs和angular-highlightjs 。我变了<div ng-bind-html="activity.text">
至<div hljs ng-bind-html="activity.text">
现在的问题是,结合 ng-bind-html 和 hljs 指令无法按预期工作。
它不会向代码标记(前代码)添加语法高亮,而是向整个 html 内容添加语法高亮。
是否有更好的方法来获取动态添加内容的语法突出显示?
最佳答案
我通过在服务器端添加语法突出显示解决了我的问题(因为我也在服务器端进行 Markdown 翻译)。 我使用 NodeJS 和 ExpressJS 框架作为后端。
当获取我的事件时,我通过查询参数激活highlightjs(例如GET/activities?hljs=true)。 对于每个事件,我调用以下函数(这还不是完全干净的代码,但它可以工作):
var cheerio = require('cheerio');
var hljs = require('highlight.js');
// ... express routes ...
var highlightPreCodeElements = function (htmlText) {
var $ = cheerio.load(htmlText);
$('pre code').each(function(i, block) {
if ($(this).attr('class') && $(this).attr('class').slice(0, 4) === 'lang') {
var indexOfMinus = $(this).attr('class').indexOf('-');
var language = $(this).attr('class').substr(indexOfMinus + 1);
$(this).html(hljs.highlight(language, $(this).text()).value);
}
});
return $.html();
};
如您所见,我在nodejs 和highlight.js ( npm install cheerio
) 中使用cheerio ( npm install highlight.js
) 作为jQuery-API。
在客户端,我只引用了highlightjs样式表,仅此而已。
关于javascript - ng-bind-html和highlight.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34637453/