ng-bind-html and highlight.js

ng-bind-html and highlight.js

本文关键字：js highlight and ng-bind-html      更新时间：2023-09-26

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

到目前为止，这是有效的，但没有语法突出显示。所以我添加了高光和棱角分明的高光。我已将<div ng-bind-html="activity.text">更改为<div hljs ng-bind-html="activity.text">现在的问题是，将ng-bind-html和hljs指令组合在一起并不能按预期工作。它不向代码标记（预编码）添加语法高亮，而是向整个html内容添加语法高亮。

有没有更好的方法可以为动态添加的内容突出显示语法？

我通过在服务器端添加语法高亮显示来解决问题（因为我也在服务器端进行降价翻译）。我使用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 highlight.js）中使用cheerio（npm install cheerio）用于jQuery-API。

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

相关文章：