2012-06-02 15 views
16

私はGoogleのprettifyを使用していくつかの構文を強調しようとしていますが、これまで動作していません。twitterブートストラップでの構文の強調表示

<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タグをあまりにも乱さずにこの作業を行う方法はありますか。

+1

私には同じ問題があります。 –

答えて

25

EDIT:Twitterのブートストラップ2.0.xのためのが、それはこれらの2つのファイルの代わりの方法を使用しては、ドキュメントに記述2.1.xの

使用して正常に動作します。

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

この

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

は、2つのファイルのprettify.cssにリンクした後、私

<!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> 
+0

私の更新された答えを見てください – baptme

+0

GitHubパスを直接使用する場合でも、上記のコードサンプルは動作します。 – ezraspectre

+0

2.1.1で、質問は約2.0.4 – baptme

2

のために働く、prettify.jsは、あなたのフッターにこのコードを追加

<script> 
// @prettify 
!function ($) { 
    $(function(){ 
    window.prettyPrint && prettyPrint() 
    }) 
}(window.jQuery); 
// #prettify 
</script> 
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> 
関連する問題