Syntax highlighting on twitter bootstrap

Asked 2/6, 2012 at 11:41 Answered 21/6, 2013 at 16:37

I am trying to highlight some syntax using Google prettify but so far, its not working.

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

Is there a solution to make this work without messing too much with the pre tag already in bootstrap?.

Drucill answered 2/6, 2012 at 11:41 Comment(0)

EDIT: for twitter bootstrap 2.0.x, it works fine with 2.1.x

Use the those 2 files instead of using the method describe in the 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

This works for me

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

Lubin answered 2/6, 2012 at 11:52 Comment(5)

The above code sample does work even if you use the GitHub paths directly. – Misappropriate 28/9, 2012 at 12:55

on 2.1.1 it does, the question was about 2.0.4 – Lubin 28/9, 2012 at 14:30

RECOMENDATION: You should use window.prettyPrint && prettyPrint() on <script> tag instead of "onload" – Valorous 18/10, 2012 at 16:21

Links no longer available – Mccauley 29/5, 2014 at 14:19

I found download links at code.google.com/p/google-code-prettify/downloads/list – Artel 30/5, 2014 at 17:19

Not sure why it wasn't suggested to modify with:

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

Pitchblende answered 21/6, 2013 at 16:37 Comment(0)

After linking to the 2 files prettify.css, prettify.js add this code to your footer

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

Unbalanced answered 25/12, 2012 at 19:9 Comment(0)

Recommended topics

Hot tags