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" />




No comments:

Post a Comment

Followers

Popular Posts