【问题标题】: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
    • 建议:您应该在
    • 链接不再可用
    【解决方案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>
      

      【讨论】:

        猜你喜欢
        • 2017-08-06
        • 1970-01-01
        • 2010-11-26
        • 2016-06-09
        • 1970-01-01
        • 1970-01-01
        • 2016-12-29
        • 2011-08-26
        • 2011-09-22
        相关资源
        最近更新 更多