7.9 KiB
Awesome HTML themes for files exported from Org mode
Overview
Description
Org mode provides basic HTML support. Though, we can easily override CSS stylesheets and add our own HTML themes.
<script src="http://platform.twitter.com/widgets.js"></script> <a href="https://twitter.com/share" class="twitter-share-button" data-via="f_niessen">Tweet</a>
Objective
The goal of the Org-HMTL themes is to provide you with a list of very nice (cross-browser) themes.
Requirements
Org mode version 8 (or later) is required.
If such a version is not bundled with your Emacs, install one from ELPA.
Quotations
"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
Gallery
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
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 |
Installing a theme
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
BigBlow
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>
Contributing
I love contributions! If you'd like to contribute, please send a patch file or submit a pull request via GitHub.
License
Copyright (C) 2011-2014 Fabrice Niessen.
These Org-HTML Themes are open source and free to use under GPL.