DokuWiki with fixed width code blocks

Code sections should be shown with a fixed width font. However, for some reason DokuWiki (release 2011-05-25a "Rincewind") didn't do that by default. I tried looking for plugins for solving the problem but the two that I found (xterm and xterm2) were both clearly outdated and buggy. Luckily, the problem can be solved with some simple CCS editing.

These instructions will turn the default

into this

Go to whatever directory the DokuWiki is installed. Then open lib/tpl/default/design.css. That's the default stylesheet for the default theme. Locate

div.dokuwiki pre,
div.dokuwiki code {
  font-family: monospace, serif;
  /* second generic font fixes problem with font-size, see
     http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */
  font-size: 100%;
}
div.dokuwiki pre {
  padding: 0.5em;
  border: 1px dashed __border__;
  overflow: auto;
}

and replace with

div.dokuwiki pre,
div.dokuwiki code {
  font-family: monospace;
  font-size: 120%;
}
div.dokuwiki pre {
  padding: 0.5em;
  border: 1px dashed __border__;
  color: __text__;
  overflow: auto;
  margin-left: 20px;
  margin-right: 20px;
}

Save and shift-reload the wiki page. Feel free to change the margins or font size if needed.