org-html-themes/README.html

531 lines
23 KiB
HTML
Raw Normal View History

<!-- <xml version="1.0" encoding="utf-8"> -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta name="generator" content=
"HTML Tidy for Cygwin (vers 1st September 2004), see www.w3.org" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Org-mode" />
<meta name="author" content="Fabrice Niessen" />
<meta name="description" content="Org-HTML export made simple." />
<meta name="keywords" content=
2015-01-29 14:17:23 +01:00
"org-mode, export, html, theme, style, css, js, bigblow" />
<link rel="stylesheet" type="text/css" href=
"styles/bigblow/css/htmlize.css" />
<link rel="stylesheet" type="text/css" href=
"styles/bigblow/css/bigblow.css" />
<link rel="stylesheet" type="text/css" href=
"styles/bigblow/css/hideshow.css" />
<script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js">
</script>
<script type="text/javascript" src=
"styles/bigblow/js/jquery.localscroll-min.js">
</script>
<script type="text/javascript" src=
"styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js">
</script>
<script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js">
</script>
<script type="text/javascript" src="styles/bigblow/js/bigblow.js">
</script>
<script type="text/javascript" src="styles/bigblow/js/hideshow.js">
</script>
</head>
<body>
<div id="content">
<h1 class="title"></h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li>
<a href="#sec-1">1. Awesome HTML themes for files exported from Org
mode</a>
<ul>
<li>
<a href="#sec-1-1">1.1. Overview</a>
<ul>
<li><a href="#unnumbered-1">Description</a></li>
<li><a href="#unnumbered-2">Objective</a></li>
<li><a href="#unnumbered-3">Requirements</a></li>
</ul>
</li>
<li><a href="#sec-1-2">1.2. Quotations</a></li>
<li>
<a href="#sec-1-3">1.3. Gallery</a>
<ul>
2015-01-29 14:17:23 +01:00
<li><a href="#unnumbered-4">Bigblow</a></li>
</ul>
</li>
<li>
<a href="#sec-1-4">1.4. Installing a theme</a>
<ul>
2015-01-29 14:17:23 +01:00
<li><a href="#unnumbered-5">Bigblow</a></li>
</ul>
</li>
<li>
<a href="#sec-1-5">1.5. Contributing</a>
<ul>
<li><a href="#unnumbered-6">Issues</a></li>
<li><a href="#unnumbered-7">Patches</a></li>
<li><a href="#unnumbered-8">Donations</a></li>
</ul>
</li>
<li><a href="#sec-1-6">1.6. License</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Awesome HTML
themes for files exported from Org mode <a href=
"http://opensource.org/licenses/GPL-3.0"><object type="image/svg+xml"
data="http://img.shields.io/:license-gpl-blue.svg">
Sorry, your browser does not support SVG.
</object></a> <a href=
"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=VCVAS6KPDQ4JC&amp;lc=BE&amp;item_number=org-html-themes&amp;currency_code=EUR&amp;bn=PP-DonationsBF:btn_donate_LG.gif:NonHosted">
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif"
alt="btn_donate_LG.gif" /></a></h2>
<div class="outline-text-2" id="text-1"></div>
<div id="outline-container-sec-1-1" class="outline-3">
<h3 id="sec-1-1"><span class="section-number-3">1.1</span>
Overview</h3>
<div class="outline-text-3" id="text-1-1"></div>
<div id="outline-container-unnumbered-1" class="outline-4">
<h4 id="unnumbered-1">Description</h4>
<div class="outline-text-4" id="text-unnumbered-1">
<p>Org mode provides basic HTML support. Though, we can easily
override CSS stylesheets and add our own HTML
themes.</p><script src="http://platform.twitter.com/widgets.js"
type="text/javascript">
</script> <a href="https://twitter.com/share" class="twitter-share-button"
data-via="f_niessen">Tweet</a>
</div>
</div>
<div id="outline-container-unnumbered-2" class="outline-4">
<h4 id="unnumbered-2">Objective</h4>
<div class="outline-text-4" id="text-unnumbered-2">
<p>The goal of the <b>Org-HMTL themes</b> is to provide you with a
list of very nice (cross-browser) themes.</p>
</div>
</div>
<div id="outline-container-unnumbered-3" class="outline-4">
<h4 id="unnumbered-3">Requirements</h4>
<div class="outline-text-4" id="text-unnumbered-3">
<p>Org mode version 8 (or later) is required.</p>
<p>If such a version is not bundled with your Emacs, install one
from ELPA.</p>
</div>
</div>
</div>
<div id="outline-container-sec-1-2" class="outline-3">
<h3 id="sec-1-2"><span class="section-number-3">1.2</span>
Quotations</h3>
<div class="outline-text-3" id="text-1-2">
<p>“Very very nice, I enjoy it a lot.”<br />
<i>Ista Zahn</i></p>
<p>“This is awesome. I love it!”<br />
<i>Rainer M Krug</i></p>
<p>“This is awesome!!”<br />
<i>Mehul Sanghvi</i></p>
<p>“This very nice html theme. […] I cannot use another emacs-theme
than your <a href=
"https://github.com/fniessen/emacs-leuven-theme">emacs-leuven-theme</a>,
and it is going to be probably the same with your html theme!”<br />
<i>Joseph Vidal-Rosset</i></p>
</div>
</div>
<div id="outline-container-sec-1-3" class="outline-3">
<h3 id="sec-1-3"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4" name=
"ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class=
"section-number-3">1.3</span> Gallery</h3>
<div class="outline-text-3" id="text-1-3">
<p>This is a list of available <b>HTML themes for Org mode</b>, which
you can use right now! Well, I hope to have more than one in a couple
of weeks…</p>
</div>
<div id="outline-container-unnumbered-4" class="outline-4">
2015-01-29 14:17:23 +01:00
<h4 id="unnumbered-4">Bigblow</h4>
<div class="outline-text-4" id="text-unnumbered-4">
2015-01-29 14:17:23 +01:00
<p>Bigblow is perfect for your work: it is a clean design aimed at
optimal <b>Org mode experience in your browser</b>. It looks just
awesome!</p>
<div class="figure">
<p><a href="https://www.youtube.com/watch?v=DnSGSiXYuOk" width=
"640"><img src="bigblow.png" alt="bigblow.png" width=
"640" /></a></p>
</div>
2015-01-29 14:17:23 +01:00
<p>Click on the image for a quick demo of Bigblow (2:49 min, no
audio).</p>
<p>Keyboard shortcuts to save time and boost your productivity:</p>
<table border="2" cellspacing="0" cellpadding="6" rules="groups"
frame="hsides">
<colgroup>
<col class="left" />
<col class="left" />
</colgroup>
<thead>
<tr>
<th scope="col" class="left">Shortcut</th>
<th scope="col" class="left">What it does</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left"><code>?</code> or <code>h</code></td>
<td class="left">Access the <b>dashboard</b></td>
</tr>
<tr>
<td class="left"><code>n</code></td>
<td class="left">Move to the <b>next</b> main heading</td>
</tr>
<tr>
<td class="left"><code>p</code></td>
<td class="left">Move to the <b>previous</b> main
heading</td>
</tr>
<tr>
<td class="left"><code>b</code></td>
<td class="left">Scroll up</td>
</tr>
<tr>
<td class="left"><code>&lt;</code></td>
<td class="left">Scroll to top</td>
</tr>
<tr>
<td class="left"><code>&gt;</code></td>
<td class="left">Scroll to bottom</td>
</tr>
<tr>
<td class="left"><code>-</code></td>
<td class="left">Collapse all</td>
</tr>
<tr>
<td class="left"><code>+</code></td>
<td class="left">Expand all</td>
</tr>
<tr>
<td class="left"><code>r</code></td>
<td class="left">Go to next task in list</td>
</tr>
<tr>
<td class="left"><code>R</code></td>
<td class="left">Go to previous task in list</td>
</tr>
<tr>
<td class="left"><code>q</code></td>
<td class="left">Stop reviewing the list of tasks</td>
</tr>
<tr>
<td class="left"><code>g</code></td>
<td class="left">Reload the page</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="outline-container-sec-1-4" class="outline-3">
<h3 id="sec-1-4"><span class="section-number-3">1.4</span> Installing a
theme</h3>
<div class="outline-text-3" id="text-1-4">
<p>Using a theme from the <a href="#sec-1-3">theme gallery</a> for
your own Org documents is very easy: you just need to clone the
Org-HTML themes project and add a <code>#+SETUPFILE:</code> directive
in the preamble to include the CSS and JavaScript files.</p>
<p>You can either:</p>
<ul class="org-ul">
<li>
<p>copy the “setup file” of the chosen theme to the directory of
your Org files,</p>
<div class="org-src-container">
<pre class="src src-org">
<span class="org-org-meta-line">#+SETUPFILE: THEME-NAME.setup</span>
</pre>
</div>
<p>or</p>
</li>
<li>
<p>use the (relative or absolute) path to the “setup file” (in
your Git local repository)</p>
<div class="org-src-container">
<pre class="src src-org">
<span class=
"org-org-meta-line">#+SETUPFILE: path/to/Git/repo/setup/THEME-NAME.setup</span>
</pre>
</div>
</li>
</ul>
</div>
<div id="outline-container-unnumbered-5" class="outline-4">
2015-01-29 14:17:23 +01:00
<h4 id="unnumbered-5">Bigblow</h4>
<div class="outline-text-4" id="text-unnumbered-5">
<p>In order to use this style, just copy the <a href=
"setup/bigblow-pirilampo.setup">bigblow-pirilampo.setup</a> file to
your project and link to it this way:</p>
<div class="org-src-container">
<pre class="src src-org">
<span class="org-org-meta-line">#+SETUPFILE: bigblow-pirilampo.setup</span>
</pre>
</div>
<p>If you prefer, you can add the content of the setup file at the
beginning of your Org file instead:</p>
<div class="org-src-container">
<pre class="src src-org">
<span class="org-comment"># -*- mode: org; -*-</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="http://www.pirilampo.org/styles/bigblow/css/htmlize.css&quot;/">http://www.pirilampo.org/styles/bigblow/css/htmlize.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="http://www.pirilampo.org/styles/bigblow/css/bigblow.css&quot;/">http://www.pirilampo.org/styles/bigblow/css/bigblow.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="http://www.pirilampo.org/styles/bigblow/css/hideshow.css&quot;/">http://www.pirilampo.org/styles/bigblow/css/hideshow.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js">http://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js">http://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js">http://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js">http://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js">http://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/bigblow.js">http://www.pirilampo.org/styles/bigblow/js/bigblow.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="http://www.pirilampo.org/styles/bigblow/js/hideshow.js">http://www.pirilampo.org/styles/bigblow/js/hideshow.js</a>"&gt;&lt;/script&gt;</span>
</pre>
</div>
<p>Here a local version (using relative paths):</p>
<div class="org-src-container">
<pre class="src src-org">
<span class="org-comment"># -*- mode: org; -*-</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="styles/bigblow/css/htmlize.css"/&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="styles/bigblow/css/bigblow.css"/&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="styles/bigblow/css/hideshow.css"/&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/jquery.localscroll-min.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/bigblow.js"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="styles/bigblow/js/hideshow.js"&gt;&lt;/script&gt;</span>
</pre>
</div>
<p>Here is a remote version (with CSS/JS files served from GitHub
webservers) to share <b>temporary</b> examples or demos with small
numbers of people:</p>
<div class="org-src-container">
<pre class="src src-org">
<span class="org-comment"># -*- mode: org; -*-</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/htmlize.css&quot;/">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/htmlize.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/bigblow.css&quot;/">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/bigblow.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;link rel="stylesheet" type="text/css" href="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/hideshow.css&quot;/">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/css/hideshow.css"/</a>&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-1.11.0.min.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-1.11.0.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-ui-1.10.2.min.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery-ui-1.10.2.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.localscroll-min.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.localscroll-min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.zclip.min.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/jquery.zclip.min.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/bigblow.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/bigblow.js</a>"&gt;&lt;/script&gt;</span>
<span class=
"org-org-meta-line">#+HTML_HEAD: &lt;script type="text/javascript" src="<a href="https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/hideshow.js">https://rawgit.com/fniessen/org-html-themes/master/styles/bigblow/js/hideshow.js</a>"&gt;&lt;/script&gt;</span>
</pre>
</div>
</div>
</div>
</div>
<div id="outline-container-sec-1-5" class="outline-3">
<h3 id="sec-1-5"><span class="section-number-3">1.5</span>
Contributing</h3>
<div class="outline-text-3" id="text-1-5"></div>
<div id="outline-container-unnumbered-6" class="outline-4">
<h4 id="unnumbered-6">Issues</h4>
<div class="outline-text-4" id="text-unnumbered-6">
<p>Report issues and suggest features and improvements on the
<a href=
"https://github.com/fniessen/org-html-themes/issues/new">GitHub
issue tracker</a>.</p>
</div>
</div>
<div id="outline-container-unnumbered-7" class="outline-4">
<h4 id="unnumbered-7">Patches</h4>
<div class="outline-text-4" id="text-unnumbered-7">
<p>I love contributions! Patches under any form are always
welcome!</p>
</div>
</div>
<div id="outline-container-unnumbered-8" class="outline-4">
<h4 id="unnumbered-8">Donations</h4>
<div class="outline-text-4" id="text-unnumbered-8">
<p>If you like the org-html-themes project, you can show your
appreciation and support future development by making a <a href=
"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=VCVAS6KPDQ4JC&amp;lc=BE&amp;item_number=org-html-themes&amp;currency_code=EUR&amp;bn=PP-DonationsBF:btn_donate_LG.gif:NonHosted">
donation</a> through PayPal.</p>
<p>Regardless of the donations, org-html-themes will always be free
both as in beer and as in speech.</p>
</div>
</div>
</div>
<div id="outline-container-sec-1-6" class="outline-3">
<h3 id="sec-1-6"><span class="section-number-3">1.6</span> License</h3>
<div class="outline-text-3" id="text-1-6">
<p>Copyright (C) 2011-2014 Fabrice Niessen.</p>
<p>Author: Fabrice Niessen<br />
Keywords: org-mode html themes</p>
<p>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.</p>
<p>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.</p>
<p>You should have received a copy of the GNU General Public License
along with this program. If not, see <a href=
"http://www.gnu.org/licenses/">http://www.gnu.org/licenses/</a>.</p>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
<div id="footer">
<div id="copyright">
Copyright © Fabrice Niessen
</div>
</div>
</div>
</body>
</html>