Org file to beautiful Tufte html with one command

I really like the design of Edward Tufte’s handouts. However, there is no single command for just exporting a org file to the Tufte-like html for lazy people like me or newbie who don’t know too much about org mode setups. Although there is ox-tufte intending to do the job, it didn’t solve that the org-exported html template is not totally compatible with the Tufte CSS and the generated page is not responsive on mobile device. Also, its configuration makes it hard to use for newbie. Based on my own taste, I added some nice features by tweaking the html template and curating my CSS.

Screenshot

see the example page here and the org file.

Features

• modern responsive html page.
• embed image in exported html so that its self-contained!
• one command M-x export-org-tufte-html just give me what I want
• use fast and powerful katex instead of mathjax to render math.
• nice source code display by using et-book-ligatures font
• just works without having any org options, eg. #+html_head:
• go to top of page

Installation

manual

Just fetch org-tufte.el and save it somewhere. Then load it

(add-to-list 'load-path "/path/to/org-tufte")
(require 'org-tufte)

use-package

(use-package org-tufte
  :ensure nil
  :load-path "PATH"
  :config
  (setq org-tufte-htmlize-light-theme nil  ;; disable the default light theme
        org-tufte-embed-images nil ;; do not embed images. faster!
        org-tufte-goto-top-button t ;; add go-to-top button in html
        org-html-html5-fancy t  ;; enable html5 elements
        org-html-doctype "html5" ;; html5 page
        )
  )

Customization

Dark theme

Currently, I used a light theme. If you want the dark theme of the original tufte.css, you should add this setup.

(setq org-tufte-htmlize-light-theme nil)

highlighting source code

You can disable the source code highlighting by customizing the option of org-mode like the following

(setq org-html-htmlize-output-type nil)

embedding images in html

The default org html-export does not embed images. Hence, you have to send archives including images when you share your html page to other people. I feel it is very convenient to just share a single self-contained html, so org-tufte enables embedding images in html by default. But it may be a bit slow if there are too many large images. If you don’t like it, you can disable it by the following configuration.

(setq org-tufte-embed-images nil)

Changelog

v0.9.0

• rename `org-tufte-htmlize-code’ to `org-tufte-htmlize-light-theme’
• disable the source code highlighting by (setq org-html-htmlize-output-type nil)

v0.8.0

• fullwidth image is supported for html5 page via #+attr_html: :class fullwidth

v0.7.0

• Can work properly with rg-publish-org-to

v0.6.0

• Make export-org-tufte-html command as function

v0.5.0

• Make figure caption a marginnote. #5
• New option: org-tufte-posted-string. #4
• New option: org-tufte-goto-top-button.

v0.4.0

• add button to go to top of page [fn:1]

v0.3.0

• show date and author under title if #+date: is defined

v0.2.0

• embed images in html!

v0.1.0

• first release

Footnotes

[fn:1] user can custmoize this

Credits

some codes are copied from

• https://github.com/dakrone/ox-tufte
• https://github.com/sulami/sulami.github.io/blob/develop/config.el