1
0
mirror of https://github.com/fniessen/org-html-themes.git synced 2024-06-25 07:37:43 +02:00
org-html-themes/README.html
2015-01-29 14:17:23 +01:00

531 lines
23 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- <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=
"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>
<li><a href="#unnumbered-4">Bigblow</a></li>
</ul>
</li>
<li>
<a href="#sec-1-4">1.4. Installing a theme</a>
<ul>
<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">
<h4 id="unnumbered-4">Bigblow</h4>
<div class="outline-text-4" id="text-unnumbered-4">
<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>
<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">
<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>