https://github.com/zilong-li/org-tufte
Export org file to the beauty Tufte html
https://github.com/zilong-li/org-tufte
emacs-package orgmode tufte-css
Last synced: 4 months ago
JSON representation
Export org file to the beauty Tufte html
- Host: GitHub
- URL: https://github.com/zilong-li/org-tufte
- Owner: Zilong-Li
- Created: 2023-03-09T10:27:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-11-18T13:16:05.000Z (7 months ago)
- Last Synced: 2025-11-18T15:58:18.476Z (7 months ago)
- Topics: emacs-package, orgmode, tufte-css
- Language: Emacs Lisp
- Homepage: https://zilongli.org/code/org-tufte-example.html
- Size: 10.1 MB
- Stars: 87
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: readme.org
Awesome Lists containing this project
README
#+title: 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 [[https://github.com/dakrone/ox-tufte][ox-tufte]] intending to do the job, it didn't solve that the org-exported html template is not totally compatible with the [[https://edwardtufte.github.io/tufte-css/][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 [[https://zilongli.org/code/org.css][my CSS]].
* Screenshot
see the [[https://zilongli.org/code/org-tufte-example.html][example]] page here and the [[https://zilongli.org/code/org-tufte-example.org][org]] file.
[[file:screen-demo-1.png]]
[[file:screen-demo-2.png]]
* 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 [[file:org-tufte.el]] and save it somewhere. Then load it
#+begin_src emacs-lisp
(add-to-list 'load-path "/path/to/org-tufte")
(require 'org-tufte)
#+end_src
** use-package
#+begin_src emacs-lisp
(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
)
)
#+end_src
* 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.
#+begin_src emacs-lisp
(setq org-tufte-htmlize-light-theme nil)
#+end_src
** highlighting source code
You can disable the source code highlighting by customizing the option of org-mode like the following
#+begin_src emacs-lisp
(setq org-html-htmlize-output-type nil)
#+end_src
** 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.
#+begin_src emacs-lisp
(setq org-tufte-embed-images nil)
#+end_src
* 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. [[https://github.com/Zilong-Li/org-tufte/pull/5][#5]]
- New option: ~org-tufte-posted-string~. [[https://github.com/Zilong-Li/org-tufte/pull/4][#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