skip to main | skip to sidebar

2010年05月20日

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" />
Posted by djcb at 10:15 AM
Labels: ,

2 comments:

Anonymous said...

Where do I put the *CSS-file?

I'm getting a error: "let: Wrong type argument: stringp, nil"

July 5, 2011 at 3:32 PM
Anonymous said...

This input doesn't work, something is missing..

April 23, 2014 at 2:30 AM

Post a Comment

Subscribe to: Post Comments (Atom)
 

AltStyle によって変換されたページ (->オリジナル) /