2016-09-18 11:13:13 +02:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en" >
< head >
2017-01-29 21:32:12 +01:00
< meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
2016-09-18 11:13:13 +02:00
< title > How to export Org mode files into awesome HTML in 2 minutes< / title >
2017-01-29 21:32:12 +01:00
< meta name = "generator" content = "Org mode" / >
< meta name = "author" content = "Fabrice Niessen" / >
< meta name = "description" content = "Org-HTML export made simple."
2016-09-18 11:13:13 +02:00
/>
2017-01-29 21:32:12 +01:00
< meta name = "keywords" content = "org-mode, export, html, theme, style, css, js, bigblow" / >
2016-09-18 11:13:13 +02:00
< style type = "text/css" >
<!-- /* --> <![CDATA[/*> <!-- */
2017-01-29 21:32:12 +01:00
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
2016-09-18 11:13:13 +02:00
.todo { font-family: monospace; color: red; }
2017-01-29 21:32:12 +01:00
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
2016-09-18 11:13:13 +02:00
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
2017-01-29 21:32:12 +01:00
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
2016-09-18 11:13:13 +02:00
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
2017-01-29 21:32:12 +01:00
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
2016-09-18 11:13:13 +02:00
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
2017-01-29 21:32:12 +01:00
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
2018-11-08 17:09:42 +01:00
pre.src-hledger:before { content: 'hledger'; }
2017-01-29 21:32:12 +01:00
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-lua:before { content: 'Lua'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
2016-09-18 11:13:13 +02:00
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
2017-01-29 21:32:12 +01:00
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
2016-09-18 11:13:13 +02:00
dt { font-weight: bold; }
2017-01-29 21:32:12 +01:00
.footpara { display: inline; }
2016-09-18 11:13:13 +02:00
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
2017-01-29 21:32:12 +01:00
.org-svg { width: 90%; }
2016-09-18 11:13:13 +02:00
/*]]>*/-->
< / style >
2018-11-08 17:28:13 +01:00
< link rel = "stylesheet" type = "text/css" href = "https://www.pirilampo.org/styles/readtheorg/css/htmlize.css" / >
< link rel = "stylesheet" type = "text/css" href = "https://www.pirilampo.org/styles/readtheorg/css/readtheorg.css" / >
2016-09-18 11:13:13 +02:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" > < / script >
2018-11-08 17:28:13 +01:00
< script type = "text/javascript" src = "https://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js" > < / script >
< script type = "text/javascript" src = "https://www.pirilampo.org/styles/readtheorg/js/readtheorg.js" > < / script >
2016-09-18 11:13:13 +02:00
< / head >
< body >
< div id = "content" >
< h1 class = "title" > How to export Org mode files into awesome HTML in 2 minutes< / h1 >
< div id = "table-of-contents" >
< h2 > Table of Contents< / h2 >
< div id = "text-table-of-contents" >
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#orga1acb6b" > 1. Overview< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org372e5de" > 1.1. Description< / a > < / li >
< li > < a href = "#org64059de" > 1.2. Requirements< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#orgf204fa7" > 2. Quotations< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org45a55bd" > 2.1. About Bigblow< / a > < / li >
< li > < a href = "#org349a659" > 2.2. About ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org76c12a2" > 3. Gallery< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org57c8f42" > 3.1. Bigblow< / a > < / li >
< li > < a href = "#org02c69b9" > 3.2. ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org34aad7d" > 4. Demo< / a > < / li >
< li > < a href = "#orgee871cc" > 5. Installing a theme< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org9179c93" > 5.1. Bigblow< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org0b1af23" > Local version< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org155b202" > 5.2. ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org51fd03c" > 6. Contributing< / a >
2016-09-18 11:13:13 +02:00
< ul >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org06cf64c" > 6.1. Issues< / a > < / li >
< li > < a href = "#orgbdde12a" > 6.2. Patches< / a > < / li >
< li > < a href = "#org2563bd6" > 6.3. Donations< / a > < / li >
< li > < a href = "#orge8d3b9d" > 6.4. Follow me< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2018-11-08 17:28:13 +01:00
< li > < a href = "#org9acb7fc" > 7. License< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / div >
< / div >
< a href = "http://opensource.org/licenses/GPL-3.0" >
< img src = "http://img.shields.io/:license-gpl-blue.svg" alt = ":license-gpl-blue.svg" / >
< / a >
< a href = "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VCVAS6KPDQ4JC&lc=BE&item_number=org%2dhtml%2dthemes¤cy_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" >
< img src = "https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt = "btn_donate_LG.gif" / >
< / a >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-orga1acb6b" class = "outline-2" >
< h2 id = "orga1acb6b" > < span class = "section-number-2" > 1< / span > Overview< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-1" >
2018-11-08 17:09:42 +01:00
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org372e5de" class = "outline-3" >
< h3 id = "org372e5de" > < span class = "section-number-3" > 1.1< / span > Description< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-1-1" >
< p >
Though you can easily override CSS stylesheets and add your own HTML themes, we
can say (or write) that Org mode provides a < i > basic< / i > HTML support.
< / p >
< p >
< b > Org-HMTL themes< / b > is an open source framework for providing you with a list of
very nice (cross-browser) themes for all your Org documents. Use them to < b > style
your docs< / b > , and your colleagues will come up to tell you that you are a genius!
< / p >
< p >
Share this content by tweeting this page:
< / p >
< 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 >
< p >
Follow < a href = "https://twitter.com/f_niessen" > f_niessen< / a > on Twitter for updates on Org-HTML themes!
< / p >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org64059de" class = "outline-3" >
< h3 id = "org64059de" > < span class = "section-number-3" > 1.2< / span > Requirements< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-1-2" >
< 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 >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-orgf204fa7" class = "outline-2" >
< h2 id = "orgf204fa7" > < span class = "section-number-2" > 2< / span > Quotations< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-2" >
2018-11-08 17:09:42 +01:00
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org45a55bd" class = "outline-3" >
< h3 id = "org45a55bd" > < span class = "section-number-3" > 2.1< / span > About Bigblow< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-2-1" >
< p >
2017-01-29 21:32:12 +01:00
“ Very very nice, I enjoy it a lot.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Ista Zahn< / i >
< / p >
< p >
2017-01-29 21:32:12 +01:00
“ This is awesome. I love it!” < br / >
2016-09-18 11:13:13 +02:00
– < i > Rainer M Krug< / i >
< / p >
< p >
2017-01-29 21:32:12 +01:00
“ This is awesome!!” < br / >
2016-09-18 11:13:13 +02:00
– < 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
2017-01-29 21:32:12 +01:00
theme!” < br / >
2016-09-18 11:13:13 +02:00
– < i > Joseph Vidal-Rosset< / i >
< / p >
< p >
“ Thanks a lot for sharing [… ] the wonderful Bigblow theme. I create lot of
specification for other team members to use. It has always been a trouble to
share and maintain such spec. Now, I can create a much neater spec which is
2017-01-29 21:32:12 +01:00
available for the team’ s reference as a webpage.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Shankar R.< / i >
< / p >
< p >
“ I like Bigblow the best. I’ ve exported most of my Org files using this theme
and published them within my company’ s intranet. Thanks for sharing this
2017-01-29 21:32:12 +01:00
wonderful package!” < br / >
2016-09-18 11:13:13 +02:00
– < i > Richard K.< / i >
< / p >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org349a659" class = "outline-3" >
< h3 id = "org349a659" > < span class = "section-number-3" > 2.2< / span > About ReadTheOrg< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-2-2" >
< p >
“ OMG. The ReadTheOrg theme for exported HTML from org mode files is eye
2017-01-29 21:32:12 +01:00
wateringly beautiful. Thank you!” < br / >
2016-09-18 11:13:13 +02:00
– < i > Rob Stewart< / i >
< / p >
< p >
“ It is fantastic, so beautiful. I will switch several of my pages over to
2017-01-29 21:32:12 +01:00
this theme.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Carsten D.< / i >
< / p >
< p >
2017-01-29 21:32:12 +01:00
“ That is incredibly impressive. Thanks for this.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Noah R.< / i >
< / p >
< p >
2017-01-29 21:32:12 +01:00
“ Thank you! I enjoy your themes. The best ones I’ ve ever found.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Kang T.< / i >
< / p >
< p >
“ Awesome theme. Wonderful job. You’ re doing a wonderful thing — it will
enable people (at least those who use Emacs and Org mode) to put together
on-line reference works in a much-more usable fashion than is currently
2017-01-29 21:32:12 +01:00
available.” < br / >
2016-09-18 11:13:13 +02:00
– < i > D. C. Toedt< / i >
< / p >
< p >
2017-01-29 21:32:12 +01:00
“ Extremely useful.” < br / >
2016-09-18 11:13:13 +02:00
– < i > Thomas S. Dye< / i >
< / p >
< / div >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org76c12a2" class = "outline-2" >
< h2 id = "org76c12a2" > < a id = "ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4" > < / a > < span class = "section-number-2" > 3< / span > Gallery< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-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 >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org57c8f42" class = "outline-3" >
< h3 id = "org57c8f42" > < span class = "section-number-3" > 3.1< / span > Bigblow< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-3-1" >
< 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 >
2017-01-29 21:32:12 +01:00
< col class = "org-left" / >
2016-09-18 11:13:13 +02:00
2017-01-29 21:32:12 +01:00
< col class = "org-left" / >
2016-09-18 11:13:13 +02:00
< / colgroup >
< thead >
< tr >
2017-01-29 21:32:12 +01:00
< th scope = "col" class = "org-left" > Shortcut< / th >
< th scope = "col" class = "org-left" > What it does< / th >
2016-09-18 11:13:13 +02:00
< / tr >
< / thead >
< tbody >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > ?< / code > or < code > h< / code > < / td >
< td class = "org-left" > Access the < b > dashboard< / b > < / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > n< / code > < / td >
< td class = "org-left" > Move to the < b > next< / b > main heading< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > p< / code > < / td >
< td class = "org-left" > Move to the < b > previous< / b > main heading< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > b< / code > < / td >
< td class = "org-left" > Scroll up< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > < < / code > < / td >
< td class = "org-left" > Scroll to top< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > > < / code > < / td >
< td class = "org-left" > Scroll to bottom< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > -< / code > < / td >
< td class = "org-left" > Collapse all< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > +< / code > < / td >
< td class = "org-left" > Expand all< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > r< / code > < / td >
< td class = "org-left" > Go to next task in list< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > R< / code > < / td >
< td class = "org-left" > Go to previous task in list< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > q< / code > < / td >
< td class = "org-left" > Stop reviewing the list of tasks< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< tr >
2017-01-29 21:32:12 +01:00
< td class = "org-left" > < code > g< / code > < / td >
< td class = "org-left" > Reload the page< / td >
2016-09-18 11:13:13 +02:00
< / tr >
< / tbody >
< / table >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org02c69b9" class = "outline-3" >
< h3 id = "org02c69b9" > < span class = "section-number-3" > 3.2< / span > ReadTheOrg< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-3-2" >
< p >
2018-11-08 17:20:49 +01:00
ReadTheOrg is a clone of the official – and great! – < a href = "https://github.com/snide/sphinx_rtd_theme" > theme< / a >
2016-09-18 11:13:13 +02:00
used in the < a href = "http://docs.readthedocs.org/en/latest/" > Read The Docs< / a > site. It gives a beautiful and professional style to
all your Org docs.
< / p >
< p >
2018-11-08 17:20:49 +01:00
< b > Thanks to its creator(s)!< / b >
2016-09-18 11:13:13 +02:00
< / p >
< div class = "figure" >
< p > < img src = "readtheorg.png" alt = "readtheorg.png" width = "640" / >
< / p >
< / div >
< div class = "note" >
< p >
While the original theme shines on mobile devices as well, ReadTheOrg does not
stay completely functional.
< / p >
< p >
I don’ t have a lot of time to maintain this project due to other
responsibilities. Help is welcome to work on that (and eventually improve the
default structure of the HTML export)!
< / p >
< / div >
< / div >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org34aad7d" class = "outline-2" >
< h2 id = "org34aad7d" > < span class = "section-number-2" > 4< / span > Demo< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-4" >
< p >
I’ ve written a demo page for the themes that provides a maximal working support
of Org mode syntax.
< / p >
< p >
Please see the < a href = "https://github.com/fniessen/refcard-org-mode" > Org mode refcard< / a > page for full examples of headings, code,
admonitions, footnotes, tables and other details.
< / p >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-orgee871cc" class = "outline-2" >
< h2 id = "orgee871cc" > < span class = "section-number-2" > 5< / span > Installing a theme< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-5" >
< p >
2018-11-08 17:28:13 +01:00
Using a theme from the < a href = "#org76c12a2" > theme gallery< / a > for your own Org documents is very easy:
2018-11-08 17:09:42 +01:00
you just need to < b > clone or download< / b > the Org-HTML themes project, add
a < code > #+SETUPFILE:< / code > directive in the preamble to include the CSS and JavaScript
files, then export your Org mode file to HTML.
2016-09-18 11:13:13 +02:00
< / p >
< p >
You can either:
< / p >
< ul class = "org-ul" >
2017-01-29 21:32:12 +01:00
< li > < p >
copy the “ setup file” of the chosen theme to the directory of your Org files,
< / p >
2016-09-18 11:13:13 +02:00
< div class = "org-src-container" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: THEME-NAME.setup< / span >
2016-09-18 11:13:13 +02:00
< / pre >
< / div >
< p >
or
2017-01-29 21:32:12 +01:00
< / p > < / li >
2016-09-18 11:13:13 +02:00
2017-01-29 21:32:12 +01:00
< li > < p >
use the (relative or absolute) path to the “ setup file” (in your Git local
2016-09-18 11:13:13 +02:00
repository)
2017-01-29 21:32:12 +01:00
< / p >
2016-09-18 11:13:13 +02:00
< div class = "org-src-container" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: path/to/Git/repo/setup/THEME-NAME.setup< / span >
2016-09-18 11:13:13 +02:00
< / pre >
2017-01-29 21:32:12 +01:00
< / div > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< p >
Then export your Org mode file to HTML with < code > org-html-export-to-html< / code > or with < code > C-c
C-e h h< / code > .
< / p >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org9179c93" class = "outline-3" >
< h3 id = "org9179c93" > < span class = "section-number-3" > 5.1< / span > Bigblow< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-5-1" >
< p >
In order to use the Bigblow style, just copy the < a href = "setup/theme-bigblow.setup" > theme-bigblow.setup< / a > file to
your project and link to it this way:
< / p >
< div class = "org-src-container" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: theme-bigblow.setup< / span >
2016-09-18 11:13:13 +02:00
< / 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" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-comment" > # -- mode: org; --< / span >
2018-11-08 17:28:13 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="< a href = "https://www.pirilampo.org/styles/bigblow/css/htmlize.css"/" > https://www.pirilampo.org/styles/bigblow/css/htmlize.css"/< / a > > < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="< a href = "https://www.pirilampo.org/styles/bigblow/css/bigblow.css"/" > https://www.pirilampo.org/styles/bigblow/css/bigblow.css"/< / a > > < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="< a href = "https://www.pirilampo.org/styles/bigblow/css/hideshow.css"/" > https://www.pirilampo.org/styles/bigblow/css/hideshow.css"/< / a > > < / span >
2018-11-08 17:09:42 +01:00
2018-11-08 17:28:13 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js" > https://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js" > https://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js< / a > "> < /script> < / span >
2018-11-08 17:09:42 +01:00
2018-11-08 17:28:13 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js" > https://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js" > https://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js" > https://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/bigblow.js" > https://www.pirilampo.org/styles/bigblow/js/bigblow.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/bigblow/js/hideshow.js" > https://www.pirilampo.org/styles/bigblow/js/hideshow.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js" > https://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js< / a > "> < /script> < / span >
2016-09-18 11:13:13 +02:00
< / pre >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org0b1af23" class = "outline-4" >
< h4 id = "org0b1af23" > Local version< / h4 >
< div class = "outline-text-4" id = "text-org0b1af23" >
2016-09-18 11:13:13 +02:00
< p >
Here a local version (using relative paths):
< / p >
< div class = "org-src-container" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-comment" > # -- mode: org; --< / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="styles/bigblow/css/htmlize.css"/> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="styles/bigblow/css/bigblow.css"/> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="styles/bigblow/css/hideshow.css"/> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/jquery.localscroll-min.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/bigblow.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/bigblow/js/hideshow.js"> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="styles/lib/js/jquery.stickytableheaders.min.js"> < /script> < / span >
2016-09-18 11:13:13 +02:00
< / pre >
< / div >
< / div >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org155b202" class = "outline-3" >
< h3 id = "org155b202" > < span class = "section-number-3" > 5.2< / span > ReadTheOrg< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-5-2" >
< p >
In order to use the ReadTheOrg style, just copy the < a href = "setup/theme-readtheorg.setup" > theme-readtheorg.setup< / a > file
to your project and link to it this way:
< / p >
< div class = "org-src-container" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: theme-readtheorg.setup< / span >
2016-09-18 11:13:13 +02:00
< / 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" >
2018-11-08 17:09:42 +01:00
< pre class = "src src-org" > < span class = "org-comment" > # -- mode: org; --< / span >
2018-11-08 17:28:13 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="< a href = "https://www.pirilampo.org/styles/readtheorg/css/htmlize.css"/" > https://www.pirilampo.org/styles/readtheorg/css/htmlize.css"/< / a > > < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < link rel="stylesheet" type="text/css" href="< a href = "https://www.pirilampo.org/styles/readtheorg/css/readtheorg.css"/" > https://www.pirilampo.org/styles/readtheorg/css/readtheorg.css"/< / a > > < / span >
2018-11-08 17:09:42 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < script src="< a href = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script src="< a href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" > https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js< / a > "> < /script> < / span >
2018-11-08 17:28:13 +01:00
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js" > https://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js< / a > "> < /script> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < script type="text/javascript" src="< a href = "https://www.pirilampo.org/styles/readtheorg/js/readtheorg.js" > https://www.pirilampo.org/styles/readtheorg/js/readtheorg.js< / a > "> < /script> < / span >
2016-09-18 11:13:13 +02:00
< / pre >
< / div >
< / div >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org51fd03c" class = "outline-2" >
< h2 id = "org51fd03c" > < span class = "section-number-2" > 6< / span > Contributing< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-6" >
2018-11-08 17:09:42 +01:00
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org06cf64c" class = "outline-3" >
< h3 id = "org06cf64c" > < span class = "section-number-3" > 6.1< / span > Issues< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-6-1" >
< 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 >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-orgbdde12a" class = "outline-3" >
< h3 id = "orgbdde12a" > < span class = "section-number-3" > 6.2< / span > Patches< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-6-2" >
< p >
I love contributions! Patches under any form are always welcome!
< / p >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org2563bd6" class = "outline-3" >
< h3 id = "org2563bd6" > < span class = "section-number-3" > 6.3< / span > Donations< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-6-3" >
< p >
2017-01-29 21:32:12 +01:00
If you use the org-html-themes project (or any of < a href = "https://github.com/fniessen/" > my other projects< / a > ) and feel it
is making your life better and easier, you can show your appreciation and help
support future development by making today a < a href = "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VCVAS6KPDQ4JC&lc=BE&item_number=org-html-themes&currency_code=EUR&bn=PP-DonationsBF:btn_donate_LG.gif:NonHosted" > donation< / a > through PayPal. Thank
you!
2016-09-18 11:13:13 +02:00
< / p >
< p >
Regardless of the donations, org-html-themes will always be free both as in
beer and as in speech.
< / p >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-orge8d3b9d" class = "outline-3" >
< h3 id = "orge8d3b9d" > < span class = "section-number-3" > 6.4< / span > Follow me< / h3 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-3" id = "text-6-4" >
< p >
I have an < a href = "https://twitter.com/f_niessen" > f_niessen< / a > account on Twitter. You should follow it.
< / p >
< / div >
< / div >
< / div >
2018-11-08 17:28:13 +01:00
< div id = "outline-container-org9acb7fc" class = "outline-2" >
< h2 id = "org9acb7fc" > < span class = "section-number-2" > 7< / span > License< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-7" >
< p >
2017-01-29 21:32:12 +01:00
Copyright (C) 2011-2017 Fabrice Niessen.
2016-09-18 11:13:13 +02:00
< / p >
< p >
2017-01-29 21:32:12 +01:00
Author: Fabrice Niessen < br / >
2016-09-18 11:13:13 +02:00
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 >
< a href = "http://opensource.org/licenses/GPL-3.0" >
< img src = "http://img.shields.io/:license-gpl-blue.svg" alt = ":license-gpl-blue.svg" / >
< / a >
< a href = "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=VCVAS6KPDQ4JC&lc=BE&item_number=org%2dhtml%2dthemes¤cy_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" >
< img src = "https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt = "btn_donate_LG.gif" / >
< / a >
< / div >
< / div >
< / div >
< div id = "postamble" class = "status" >
< p class = "author" > Author: Fabrice Niessen< / p >
< p class = "validation" > < a href = "http://validator.w3.org/check?uri=referer" > Validate< / a > < / p >
< / div >
< / body >
< / html >