ng-bind和highlight.js

Question

我正在尝试对动态添加的html中的所有代码元素进行语法突出显示，这将使用ng-bind添加到当前页面中。

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

到目前为止，这是可行的，但没有语法突出显示。所以我增加了荧光笔和角荧光。我已经将<div ng-bind-html="activity.text">改为<div hljs ng-bind-html="activity.text">，现在的问题是，将ng和hljs指令组合在一起并不像预期的那样有效。它不向代码标记(预代码)添加语法突出显示，而是添加到整个html内容中。

是否有更好的方法来获得动态添加内容的语法高亮显示？

Answer 1

我通过在服务器端添加语法突出显示来解决我的问题(因为我也在服务器端进行标记转换)。我使用的是nodejs，它的后端是高速公路框架。

在获取我的活动时，我会通过查询param (f.e )激活高亮标记。叫/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 highlight.js)中为jQuery使用cheerio (npm install highlight.js)。

在客户端，我只引用萤光笔样式表，仅此而已。