{
  "$type": "site.standard.document",
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreifbwaxxm32yk73rhgbznrzd3v6gtwkmigl5vr4wuwlvpcoyp622hm"
    },
    "mimeType": "image/png",
    "size": 201691
  },
  "path": "/notes/2012-05-17-twitter-bootstrap-syntax-highlighting-tumblr/",
  "publishedAt": "2012-05-17T00:00:00.000Z",
  "site": "at://did:plc:aes3lokiqtv63fk62nwnjeuf/site.standard.publication/3mnin5cnq2q2a",
  "tags": [
    "geekery",
    "css"
  ],
  "textContent": "This was originally posted on blog.dasmith.co.uk on 17 May 2012 and was imported here from the Internet Archive on 18 December 2025. I've just spent a bit of time adding syntax highlighting to this theme after seeing the code block in Twitter Bootstrap. Although I don't post a lot of code on here, I do occasionally post snippets up and have always hated sites that don't bother to display code nicely. For starters I realised that the font-size and line-height I've been using on here make longer text posts quite difficult to read, so I reduced the of text posts a bit and set the to 1.61803399 (the golden ratio). If I ever find myself writing lots of text-heavy posts then I'll put a bit more effort into the typography. I started out by styling up the element exactly as it is in the Bootstrap CSS, although I removed the rules so that they'd be inherited: I then uploaded the Google Code Prettify script to Tumblr and included it in my theme. Rather than include another remote CSS file, I dropped the prettify CSS code from , and directly into the theme and added the relevant CSS from Bootstrap: This pretty much sorted things out, although things didn't quite look the same as they did on the Bootstrap demo website. After adding the prettify.css from Bootstrap and adjusting some of the colours to fit better, everything was sorted. Prettify allows you to specify the language too, so by applying classes to the tag, we get line numbers and syntax-highlighting for Ruby: It's worth noting that it only labels every fifth line by default and adds a different background for odd rows. You can fix this by removing: and: from the Prettify CSS respectively. Although I find it slightly saddening that Twitter Bootstrap has become so prevalent and would avoid using it for everything bar quick-and-dirty app development and prototyping, it's fantastically useful for achieving things like this in a fraction of the time it would take otherwise.",
  "title": "Twitter Bootstrap-style syntax highlighting in a Tumblr theme"
}