【问题标题】：Syntax highlight feature for Grunt-ngdocsGrunt-ngdocs 的语法高亮功能
【发布时间】：2015-02-01 02:08:24
【问题描述】：

我不知道是出了什么问题还是它尚不受支持，但我希望看到如下代码块：

```
var example = 3;
```

在要突出显示的文档中。
如何修复/添加此功能？

【问题讨论】：

标签： angularjs syntax-highlighting jsdoc

【解决方案1】：

解决方法：

marked 模块用于 grunt-ngdocs (grunt-ngdocs\node_modules\marked\lib)。由于grunt-ngdocs 使用 angular-bootstrap-prettify（顺便说一句，使用 google-code-prettify），稍微调整一下 marked 就足够了为了产生<pre class="prettyprint linenums">...</pre> 而不是<pre>...</pre>。
所以在Renderer.prototype.code函数（我的版本第757行），return语句可以这样改变：

return '<pre class="prettyprint linenums"><code>' ...
return '<pre class="prettyprint linenums"><code class="' ...

更清洁的解决方案：

ngDocs 似乎将所有 <pre>..</pre> 块替换为 <pre class="prettyprint linenums">...</pre>（v0.2.6 的第 266 行）。因此，我们可以直接在文档中使用 <pre>...</pre> 块，而不是使用 markdown ``` 代码 ``` 块。

【讨论】：

【解决方案2】：

我通过使用highlightjs 和jQuery livequery plugin 解决了这个问题

我在 Gruntfile.js 中的 ngdocs 部分现在看起来像这样：

options: {
  html5Mode: false,
  scripts: [
    'bower_components/jquery/dist/jquery.js',
    'js/jquery.livequery.min.js',
    'angular.js',
    'js/helpers/ngdocs.js',
    'bower_components/highlightjs/highlight.pack.js'
  ],
  styles: [
    'bower_components/highlightjs/styles/atelier-forest.dark.css'
  ]

我的 js/helpers/ngdocs.js 看起来像这样：

'use strict';

/* global $, hljs */
$(function () {
    $('pre code').livequery(
        function() {
            hljs.highlightBlock(this);
        });

});

【讨论】：

谢谢。我自己想出了一个与此非常相似的解决方案（除了使用 hljs 的角化版本）。然后通过探索 grunt-ngdocs 中的 ngdoc.js 和 docs.js，我想出了一个更好的解决方案，我将在单独的答案中进行描述。