ng-bind-html和Highlight.js

Question

我正在尝试为动态添加的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内容中添加。

是否有更好的方法来获取动态添加内容的语法突出显示？

Answer 1

我通过在服务器端添加语法突出显示来修复我的问题（因为我也在服务器端进行markdown转换）。 我正在使用nodejs和expressjs框架作为后端。

在获取活动时，我通过查询参数（fe GET / activities？hljs = true）激活Highlightjs。 对于每个活动，我都调用以下函数（虽然还不是很干净的代码，但是可以正常工作）：

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();
};

正如你可以看到我使用cheerio（ npm install cheerio ）在和的NodeJS highlight.js（jQuery的API npm install highlight.js ）。

在客户端，我仅引用highlightjs样式表，仅此而已。