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; }
2019-04-09 21:16:37 +02:00
.equation-container {
display: table;
text-align: center;
width: 100%;
}
.equation {
vertical-align: middle;
}
.equation-label {
display: table-cell;
text-align: right;
vertical-align: middle;
}
2016-09-18 11:13:13 +02:00
.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-29 20:39:01 +01:00
< link rel = "stylesheet" type = "text/css" href = "https://fniessen.github.io/org-html-themes/styles/readtheorg/css/htmlize.css" / >
< link rel = "stylesheet" type = "text/css" href = "https://fniessen.github.io/org-html-themes/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-29 20:39:01 +01:00
< script type = "text/javascript" src = "https://fniessen.github.io/org-html-themes/styles/lib/js/jquery.stickytableheaders.min.js" > < / script >
< script type = "text/javascript" src = "https://fniessen.github.io/org-html-themes/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 >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orge790dc4" > 1. Overview< / a >
< ul >
< li > < a href = "#orgfbe16d1" > 1.1. Description< / a > < / li >
< li > < a href = "#org24d1dd3" > 1.2. Requirements< / a > < / li >
< / ul >
< / li >
< li > < a href = "#org04dc7f4" > 2. Quotations< / a >
2016-09-18 11:13:13 +02:00
< ul >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orga9b80e6" > 2.1. About Bigblow< / a > < / li >
< li > < a href = "#orgc462bc4" > 2.2. About ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orgae167c9" > 3. Gallery< / a >
2016-09-18 11:13:13 +02:00
< ul >
2019-04-09 21:16:37 +02:00
< li > < a href = "#org1ee104c" > 3.1. Bigblow< / a > < / li >
< li > < a href = "#org84d2209" > 3.2. ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orga3913d2" > 4. Demo< / a > < / li >
< li > < a href = "#orgd61d09f" > 5. Using a theme< / a > < / li >
< li > < a href = "#orgb192d6e" > 6. Customizing a theme< / a >
2016-09-18 11:13:13 +02:00
< ul >
2019-04-09 21:16:37 +02:00
< li > < a href = "#org35d80ae" > 6.1. Change the background code blocks< / a > < / li >
< li > < a href = "#org0bd0ac5" > 6.2. Unset body width limit of ReadTheOrg< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orgacc9d25" > 7. Contributing< / a >
2016-09-18 11:13:13 +02:00
< ul >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orgb490ff4" > 7.1. Issues< / a > < / li >
< li > < a href = "#org17bc328" > 7.2. Patches< / a > < / li >
< li > < a href = "#orgf878e25" > 7.3. Donations< / a > < / li >
< li > < a href = "#orge6f7572" > 7.4. Follow me< / a > < / li >
2016-09-18 11:13:13 +02:00
< / ul >
< / li >
2019-04-09 21:16:37 +02:00
< li > < a href = "#orgbf93457" > 8. 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orge790dc4" class = "outline-2" >
< h2 id = "orge790dc4" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgfbe16d1" class = "outline-3" >
< h3 id = "orgfbe16d1" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org24d1dd3" class = "outline-3" >
< h3 id = "org24d1dd3" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org04dc7f4" class = "outline-2" >
< h2 id = "org04dc7f4" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orga9b80e6" class = "outline-3" >
< h3 id = "orga9b80e6" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgc462bc4" class = "outline-3" >
< h3 id = "orgc462bc4" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgae167c9" class = "outline-2" >
< h2 id = "orgae167c9" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org1ee104c" class = "outline-3" >
< h3 id = "org1ee104c" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org84d2209" class = "outline-3" >
< h3 id = "org84d2209" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orga3913d2" class = "outline-2" >
< h2 id = "orga3913d2" > < 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgd61d09f" class = "outline-2" >
< h2 id = "orgd61d09f" > < span class = "section-number-2" > 5< / span > Using a theme< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-5" >
< p >
2019-04-09 21:16:37 +02:00
Using a theme from the < a href = "#orgae167c9" > theme gallery< / a > for your own Org documents is very easy:
2016-09-18 11:13:13 +02:00
< / p >
2018-11-29 21:12:53 +01:00
< ol class = "org-ol" >
2017-01-29 21:32:12 +01:00
< li > < p >
2018-11-29 22:29:43 +01:00
You < b > add a< / b > < code > #+SETUPFILE:< / code > < b > directive< / b > in the preamble of your document (to include
2018-11-29 21:12:53 +01:00
the necessary CSS and JavaScript files).
2017-01-29 21:32:12 +01:00
< / p >
2016-09-18 11:13:13 +02:00
< p >
2018-11-29 21:12:53 +01:00
You can either use an URL of the following type for the “ setup file” of your
chosen theme:
2017-01-29 21:32:12 +01:00
< / p >
2016-09-18 11:13:13 +02:00
< div class = "org-src-container" >
2018-11-29 22:29:43 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: < a href = "https://fniessen.github.io/org-html-themes/setup/THEME-NAME.setup" > https://fniessen.github.io/org-html-themes/setup/THEME-NAME.setup< / a > < / span >
2016-09-18 11:13:13 +02:00
< / pre >
< / div >
< p >
2018-11-29 21:12:53 +01:00
(where < code > THEME-NAME< / code > is < code > theme-bigblow< / code > or < code > theme-readtheorg< / code > )
2016-09-18 11:13:13 +02:00
< / p >
< p >
2018-11-29 22:29:43 +01:00
or, if you < b > cloned or downloaded< / b > the Org-HTML themes project – to get no
dependency on an Internet connection – , use a (relative or absolute) path to
the local “ setup file” :
2016-09-18 11:13:13 +02:00
< / p >
< div class = "org-src-container" >
2018-11-29 22:29:43 +01:00
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+SETUPFILE: path/to/Git/repo/setup/THEME-NAME-local.setup< / span >
2016-09-18 11:13:13 +02:00
< / pre >
2018-11-29 21:12:53 +01:00
< / div > < / li >
2018-11-08 17:09:42 +01:00
2018-11-29 21:12:53 +01:00
< li > Then, you < b > export< / b > your Org mode file < b > to HTML< / b > with < code > org-html-export-to-html< / code > or
with < code > C-c C-e h h< / code > .< / li >
< / ol >
2016-09-18 11:13:13 +02:00
< / div >
< / div >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgb192d6e" class = "outline-2" >
< h2 id = "orgb192d6e" > < span class = "section-number-2" > 6< / span > Customizing a theme< / h2 >
2016-09-18 11:13:13 +02:00
< div class = "outline-text-2" id = "text-6" >
2018-11-29 21:16:25 +01:00
< p >
You love those themes, but you still would like to override particular HTML
2019-04-09 21:16:37 +02:00
tags? Some examples do follow…
2018-11-29 21:16:25 +01:00
< / p >
2019-04-09 21:16:37 +02:00
< p >
Before doing that, though, if you think it really is an improvement that could
server other persons as well, including me, you’ re invited to submit your
change…
< / p >
< / div >
< div id = "outline-container-org35d80ae" class = "outline-3" >
< h3 id = "org35d80ae" > < span class = "section-number-3" > 6.1< / span > Change the background code blocks< / h3 >
< div class = "outline-text-3" id = "text-6-1" >
2018-11-29 21:16:25 +01:00
< p >
Here’ s an example to insert into your Org documents:
< / p >
< div class = "org-src-container" >
< pre class = "src src-org" > < span class = "org-comment" > # Change the background of source block.< / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < style> pre.src{background:#343131;color:white;} < /style> < / span >
< / pre >
2018-11-08 17:09:42 +01:00
< / div >
2019-04-09 21:16:37 +02:00
< / div >
< / div >
2018-11-29 21:16:25 +01:00
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org0bd0ac5" class = "outline-3" >
< h3 id = "org0bd0ac5" > < span class = "section-number-3" > 6.2< / span > Unset body width limit of ReadTheOrg< / h3 >
< div class = "outline-text-3" id = "text-6-2" >
2018-11-29 21:16:25 +01:00
< p >
2019-04-09 21:16:37 +02:00
Solution provided by Malcolm Cook:
2018-11-29 21:16:25 +01:00
< / p >
2019-04-09 21:16:37 +02:00
< div class = "org-src-container" >
< pre class = "src src-org" > < span class = "org-org-meta-line" > #+HTML_HEAD: < style> #content{max-width:1800px;}< /style> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < style> p{max-width:800px;}< /style> < / span >
< span class = "org-org-meta-line" > #+HTML_HEAD: < style> li{max-width:800px;}< /style< / span >
< / pre >
< / div >
< / div >
2018-11-29 21:16:25 +01:00
< / div >
< / div >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgacc9d25" class = "outline-2" >
< h2 id = "orgacc9d25" > < span class = "section-number-2" > 7< / span > Contributing< / h2 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-2" id = "text-7" >
< / div >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgb490ff4" class = "outline-3" >
< h3 id = "orgb490ff4" > < span class = "section-number-3" > 7.1< / span > Issues< / h3 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-3" id = "text-7-1" >
2016-09-18 11:13:13 +02:00
< 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-org17bc328" class = "outline-3" >
< h3 id = "org17bc328" > < span class = "section-number-3" > 7.2< / span > Patches< / h3 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-3" id = "text-7-2" >
2016-09-18 11:13:13 +02:00
< p >
I love contributions! Patches under any form are always welcome!
< / p >
< / div >
< / div >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgf878e25" class = "outline-3" >
< h3 id = "orgf878e25" > < span class = "section-number-3" > 7.3< / span > Donations< / h3 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-3" id = "text-7-3" >
2016-09-18 11:13:13 +02:00
< 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orge6f7572" class = "outline-3" >
< h3 id = "orge6f7572" > < span class = "section-number-3" > 7.4< / span > Follow me< / h3 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-3" id = "text-7-4" >
2016-09-18 11:13:13 +02:00
< 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 >
2019-04-09 21:16:37 +02:00
< div id = "outline-container-orgbf93457" class = "outline-2" >
< h2 id = "orgbf93457" > < span class = "section-number-2" > 8< / span > License< / h2 >
2018-11-29 21:16:25 +01:00
< div class = "outline-text-2" id = "text-8" >
2016-09-18 11:13:13 +02:00
< p >
2018-11-29 21:22:24 +01:00
Copyright (C) 2011-2018 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 >