16

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 タグをいじらずにこれを機能させる解決策はありますか?

4

3 に答える 3

25

編集： twitterブートストラップ2.0.xの場合、2.1.xで正常に動作します

ドキュメントに記載されている方法を使用する代わりに、これら2つのファイルを使用してください。

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>
于 2012-06-02T11:52:24.150 に答える
3

次のように変更することが提案されなかった理由がわかりません:

<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>
于 2013-06-21T16:37:42.513 に答える
2

2つのファイルprettify.cssにリンクした後、prettify.jsはこのコードをフッターに追加します

<script>
// @prettify
!function ($) {
  $(function(){
  window.prettyPrint && prettyPrint()   
  })
}(window.jQuery);
// #prettify
</script>
于 2012-12-25T19:09:23.840 に答える