2012-06-02 12 views
16

Tôi đang cố gắng làm nổi bật một số cú pháp bằng cách sử dụng Google prettify nhưng cho đến nay, nó không hoạt động.Làm nổi bật cú pháp trên twitter bootstrap

<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> 

Có một giải pháp để thực hiện công việc này mà không gây rối quá nhiều với thẻ trước đã có trong bootstrap không ?.

+1

Cùng một vấn đề với tôi. –

Trả lời

25

EDIT: cho twitter bootstrap 2.0.x, nó hoạt động tốt với 2.1.x

Sử dụng những 2 file thay vì sử dụng phương pháp mô tả trong doc.

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

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

này làm việc cho tôi

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

xem câu trả lời cập nhật của tôi – baptme

+0

Mẫu mã ở trên không hoạt động ngay cả khi bạn sử dụng đường dẫn GitHub trực tiếp. – ezraspectre

+0

trên 2.1.1, câu hỏi là về 2.0.4 – baptme

2

Sau khi liên kết với 2 file prettify.css, prettify.js thêm mã này vào chân của bạn

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

Không chắc chắn lý do tại sao nó không được đề xuất sửa đổi với:

<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>