A stylesheet which makes rendered HTML exports from an Org document look like the unrendered buffer in Emacs. Yes, it’s daft. Inspired by Peter Coles’ markdown.css.
- The styles assume Normalize.css as a base, so grab that first.
- Add the
org-syntax.cssfile to your build, this will style the various elements. - Define a colour scheme of some sort. If you like Solarized you can use the included
solarized-light.cssas-is, or use it as a starting point for something else. - Add any additional styling you need to fit in with your design (headers, footers, content width etc.).
You can copy/paste the following into the <head> section of an Org HTML export to try it out (remember to remove the default CSS!):
<head>
<!-- Step 1: Normalize -->
<link rel="stylesheet" type="text/css"
href="https://necolas.github.io/normalize.css/6.0.0/normalize.css" />
<!-- Step 2: Org syntax styles -->
<link rel="stylesheet" type="text/css"
href="https://hjst.github.io/org-mode.css/org-syntax.css" />
<!-- Step 3: Colour scheme -->
<link rel="stylesheet" type="text/css"
href="https://hjst.github.io/org-mode.css/solarized-light.css" />
<!-- Step 4: Additional personal styles -->
<style type="text/css">
body {
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
font-family: "Inconsolata", monospace;
}
#content {
margin: 1em auto;
max-width: 50em;
}
pre { overflow-x: auto; }
#postamble {
margin-top: 10em;
text-align: center;
font-size: 80%;
}
</style>
</head>This is all very well, but maybe you don’t want to bother tweaking anything. Maybe you just want a single, combined, remote-hosted CSS file you can include in the header of your Org files for easy exporting. How about this:
#+OPTIONS: html-style:nil num:nil toc:nil
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://hjst.github.io/org-mode.css/combined.css" />
The html-style:nil bit disables the default Org export CSS. You almost certainly also want num:nil to suppress section numbering (it looks daft with this styling). For long documents you might delete the toc:nil to get a table of contents.
<code> / <pre> styles require a choice: if you’re using a monospace font for the body text you need to differentiate them somehow. I chose to omit the ”" symbols from from inline =<code> elements, and change their background colour instead.
Italics in Org are (by default) rendered like /this/ with an underline. Some themes (e.g. Leuven) remove the underline, others might use actual italics if the font supports it. I’ve stuck with the default, but you might want to change this to suit your overall style & font combos.
Tables aren’t very well supported. Org lets you do some crazy things with tables, and I’m lazy.
| Feature | Possible? | Status |
|---|---|---|
| Headers & borders | Totally | Done |
| Column grouping | Probably | One day |
| Column alignment | Maybe | Maybe |
| Sortable columns | Maybe | Maybe |
| Row grouping | Maybe | Maybe |
| Reveal formulas | Er… | No |
| Org-Plot integration | Actually… | No |
I also haven’t tested it in anything other than Firefox yet, so I’m sure some of it breaks in other browsers.
- [-] Lists
- [X] Nested with indentation
- [X] Alternating bullet styles
- [X] Checkbox-style lists
- [ ] Percentage complete markers on lists
[%]
- Complex table layouts (e.g. column groups)
- Images (borders & padding?)
- Property drawers
- Deadline/schedule items
- Timestamps & tags in general
- Todo states other than “TODO” and “DONE”