Org mode provides basic HTML support. Though, we can easily override CSS stylesheets and add our own HTML themes.
TweetThe goal of the Org-HMTL themes is to provide you with a list of very nice (cross-browser) themes.
Org mode version 8 (or later) is required.
If such a version is not bundled with your Emacs, install one from ELPA.
“Very very nice, I enjoy it a lot.”
– Ista Zahn
“This is awesome. I love it!”
– Rainer M Krug
“This is awesome!!”
– Mehul Sanghvi
“This very nice html theme. […] I cannot use another emacs-theme than your
emacs-leuven-theme, and it is going to be probably the same with your html
theme!”
– Joseph Vidal-Rosset
This is a list of available HTML themes for Org mode, which you can use right now! Well, I hope to have more than one in a couple of weeks…
BigBlow is perfect for your work: it is a clean design aimed at optimal Org mode experience in your browser. It looks just awesome!
Click on the image for a quick demo of BigBlow (2:49 min, no audio).
Keyboard shortcuts to save time and boost your productivity:
Shortcut | What it does |
---|---|
? or h | Access the dashboard |
n | Move to the next main heading |
p | Move to the previous main heading |
b | Scroll up |
< | Scroll to top |
> | Scroll to bottom |
- | Collapse all |
+ | Expand all |
r | Go to next task in list |
R | Go to previous task in list |
q | Stop reviewing the list of tasks |
g | Reload the page |
Using a theme from the theme gallery for your own Org documents is very easy:
you just need to clone the Org-HTML themes project and add a #+SETUPFILE:
directive in the preamble to include the CSS and JavaScript files.
You can either:
- copy the “setup file” of the chosen theme to the directory of your Org files,
#+SETUPFILE: THEME-NAME.setup
or
- use the (relative or absolute) path to the “setup file” (in your Git local
repository)
#+SETUPFILE: path/to/Git/repo/setup/THEME-NAME.setup
In order to use this style, just copy the bigblow-pirilampo.setup file to your project and link to it this way:
#+SETUPFILE: bigblow-pirilampo.setup
If you prefer, you can add the content of the setup file at the beginning of your Org file instead:
# -*- mode: org; -*-
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/bigblow.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/hideshow.css"/>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/bigblow.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/hideshow.js"></script>
Here a local version (using relative paths):
# -*- mode: org; -*-
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/bigblow.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/hideshow.css"/>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.localscroll-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/bigblow.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/hideshow.js"></script>
Here is a remote version (with CSS/JS files served from GitHub webservers) to share temporary examples or demos with small numbers of people:
# -*- mode: org; -*-
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/bigblow.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/hideshow.css"/>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-1.11.0.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.localscroll-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.zclip.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/bigblow.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/hideshow.js"></script>
Report issues and suggest features and improvements on the GitHub issue tracker.
I love contributions! Patches under any form are always welcome!
If you like the org-html-themes project, you can show your appreciation and support future development by making a donation through PayPal.
Regardless of the donations, org-html-themes will always be free both as in beer and as in speech.
Copyright (C) 2011-2014 Fabrice Niessen.
Author: Fabrice Niessen
Keywords: org-mode html themes
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.