Syntax highlighting on twitter bootstrap

Syntax highlighting on twitter bootstrap

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

  // Some source code

    class Foo {
      public int Bar { get; set; }

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


Solution 1:

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.

This works for me

<!DOCTYPE html>
<html lang="en">
<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>
<body onload="prettyPrint()" bgcolor="white">
<pre class="prettyprint linenums languague-css">
// Some source code
class Foo {
    public int Bar { get; set; }

Solution 2:

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

    // Activate Google Prettify in this page
    addEventListener('load', prettyPrint, false);
        // Add prettyprint class to pre elements
    }); // end document.ready

Solution 3:

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

// @prettify
!function ($) {
  window.prettyPrint && prettyPrint()   
// #prettify

Related:  Bootstrap Carousel image doesn't align properly