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="//">
  <script src="//"></script>
  <style type="text/css">
  pre.prettyprint {
    border: 1px solid #ccc;
    margin-bottom: 0;
    padding: 9.5px;
  <pre class="prettyprint">
  int i = 0;

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.