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-code t  ;; htmlize and beautify source code!
        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

highlighting source code

I feel being distracted by too many colors when reading blogs. Although the highlight of code block is not enabled, you can get this feature by the following configuration.

(setq org-tufte-htmlize-code t)

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.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