twitter bootstrap 上的语法高亮显示答案

【问题标题】：Syntax highlighting on twitter bootstraptwitter bootstrap 上的语法高亮显示
【发布时间】：2012-06-02 11:41:46
【问题描述】：

我正在尝试使用 Google prettify 突出显示一些语法，但到目前为止，它不起作用。

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

<body onload="prettyPrint()" bgcolor="white">

<pre class="prettyprint">
  <code class="language-css">
  // Some source code

    class Foo {
      public int Bar { get; set; }
    }
  </code>
</pre>

有没有一种解决方案可以在不过多干扰引导程序中已有的 pre 标签的情况下完成这项工作？

【问题讨论】：

标签： twitter-bootstrap prettify

【解决方案1】：

编辑：对于 twitter bootstrap 2.0.x，它适用于 2.1.x

使用这两个文件，而不是使用文档中描述的方法。

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css

http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js

这对我有用

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint()" bgcolor="white">
<pre class="prettyprint linenums languague-css">
// Some source code
class Foo {
    public int Bar { get; set; }
}
</pre>
</body>
</html>

【讨论】：

即使您直接使用 GitHub 路径，上述代码示例也可以正常工作。
在 2.1.1 上确实如此，问题是关于 2.0.4
建议：您应该在
链接不再可用
我在code.google.com/p/google-code-prettify/downloads/list找到了下载链接

【解决方案2】：

不知道为什么不建议修改：

<script>
    // Activate Google Prettify in this page
    addEventListener('load', prettyPrint, false);
    $(document).ready(function(){
        // Add prettyprint class to pre elements
        $('pre').addClass('prettyprint');           
    }); // end document.ready
</script>

【讨论】：

【解决方案3】：

链接到 2 个文件 prettify.css 后，prettify.js 将此代码添加到您的页脚

<script>
// @prettify
!function ($) {
  $(function(){
  window.prettyPrint && prettyPrint()   
  })
}(window.jQuery);
// #prettify
</script>

【讨论】：