ng-bind-html 和 highlight.js答案

【问题标题】：ng-bind-html and highlight.jsng-bind-html 和 highlight.js
【发布时间】：2016-01-06 16:03:38
【问题描述】：

我正在尝试对动态添加的 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 内容添加语法高亮。

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

【问题讨论】：

Dynamic Syntax Highlighting with AngularJS and Highlight.js的可能重复
哦，谢谢你找到这个。我会尽快试试这个！
我的问题有点不同。我不仅有一个代码块，我想要语法突出显示，还有 HTML 元素与代码元素相结合。可能重复的解决方案仅适用于恰好一个代码元素的内容......恕我直言。

标签： javascript angularjs syntax-highlighting

【解决方案1】：

我通过在服务器端添加语法高亮解决了我的问题（因为我也在服务器端进行降价翻译）。我正在使用带有 expressjs 框架的 nodejs 作为后端。

获取我的活动时，我通过查询参数激活 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 highlight.js) 中将cheerio (npm install cheerio) 用于jQuery-API。

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

【讨论】：