Prettyprint in Bootstrap 3

NOVEMBER 22, 2013

Here is how to pretty print code, using google code prettify and Bootstrap 3.


If you just use google-code-prettify with Bootstrap 3, pre style will break. You need to overwrite pre.prettyprint style, something like this:

<!DOCTYPE html>
<html lang="en">
  ...
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  ...
  <style type="text/css">
  pre.prettyprint {
    border: 1px solid #ccc;
    margin-bottom: 0;
    padding: 9.5px;
  }
  </style>
  ...
  <pre class="prettyprint">
  int i = 0;
  ...
  </pre>
  ...
</html>


The code block above is actually displayed, using prettify and Bootstrap 3. Happy coding!


Related Posts

SVG-based Sparkline with d3.js

This is a tutorial of how to create various SVG based sparklines with d3.js. Sparkline, a tiny line chart, is often very effective and visually appealing, especially for today's small screen devices.

Interactive Map with d3.js

This is a step by step tutorial of how to make responsive, interactive and zoomable map with d3.js. Converting Shapefile into GeoJSON then Topojson, you can build web/mobile-ready map application.

Responsive d3.js

It's increasingly important to make d3.js charts responsive for touch-based devices such as mobile and tablet. While this approach doesn't solve everything, it's one way of making SVG based charts dynamic and responsive.