zenburn for org-mode-generated html

If you read this blog directly, instead of through some aggregator or feed-reader, you can now see the code blocks rendered in the nice zenburn color theme that I discussed before. I'm really enjoying it, so I added some style sheet definitions, so org-mode #+BEGIN_SRC / #+END_SRC blocks look as such in the web page (and just like they look on my screen), for instance:

(defun fibo (n) 
     "calculate the Nth (N>=0) fibonacci number in a simple yet
  inefficient way"
    (cond
      ((= n 0) 0)
      ((= n 1) 1)
      (t (+ (fibo (- n 1)) (fibo (- n 2))))))

;; now, gimme a list of fibo numbers 0..20
(mapcar 'fibo (number-sequence 0 20))

Note, I discussed the use of such code blocks earlier; it's one of many nice features of org-mode. Only quite recently I found that I can press C-c ' in such a code block to edit them in a mode-specific little buffer… something new and obvious to learn every day.

Anyhow, to get the nice zenburn-output in the generated HTML, you can use the following CSS (note, so far I have only done the code blocks):

/* zenburnesque code blocks in for html-exported org mode */

pre.src {
   background: #3f3f3f; color: #dcdccc; 
}

.org-preprocessor {
   color: #8cd0d3;
}

.org-preprocessor {
   color: #8cd0d3;
}

.org-variable-name {
   color: #f0dfaf;
}

.org-string {
   color: #cc9393;
}

.org-type {
   color: #dfdfbf;
   font-weight: bold;
}

.org-function-name {
   color: #8cd0d3;
   font-weight: bold;
}

.org-keyword {
   color: #f0dfaf;
   font-weight: bold;
}

.org-comment {
   color: #7f9f7f;
}

.org-doc {
   color: #afd8af;
}

.org-comment-delimiter {
   color: #708070;
}

.org-constant {
   color: #dca3ac;
   font-weight:bold;
}

.org-builtin {
   color: #7f9f7f;
}

You can save the above CSS-blob in a file (say, zenburn-code.css), and set the style sheet for the org-html export by putting a #+STYLE:-line in your org files:

#+STYLE: <link rel="stylesheet" type="text/css" href="zenburn-code.css" />