Improve rendering on GitHub

This commit is contained in:
Fabrice Niessen 2018-11-29 22:29:43 +01:00
parent 66f635313d
commit d7838c95c8
2 changed files with 72 additions and 154 deletions

View File

@ -196,36 +196,36 @@
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#org271406f">1. Overview</a>
<li><a href="#org8c05a6c">1. Overview</a>
<ul>
<li><a href="#org57b436e">1.1. Description</a></li>
<li><a href="#orgf636bc6">1.2. Requirements</a></li>
<li><a href="#org7ef32b9">1.1. Description</a></li>
<li><a href="#orgf25f59f">1.2. Requirements</a></li>
</ul>
</li>
<li><a href="#org2d10181">2. Quotations</a>
<li><a href="#org319c020">2. Quotations</a>
<ul>
<li><a href="#orgf9cffb1">2.1. About Bigblow</a></li>
<li><a href="#org1e8dad7">2.2. About ReadTheOrg</a></li>
<li><a href="#org85e764e">2.1. About Bigblow</a></li>
<li><a href="#org4a19e8a">2.2. About ReadTheOrg</a></li>
</ul>
</li>
<li><a href="#org8d5591f">3. Gallery</a>
<li><a href="#org5945207">3. Gallery</a>
<ul>
<li><a href="#org76921a5">3.1. Bigblow</a></li>
<li><a href="#orga5730a0">3.2. ReadTheOrg</a></li>
<li><a href="#org9d62b96">3.1. Bigblow</a></li>
<li><a href="#orgff2b697">3.2. ReadTheOrg</a></li>
</ul>
</li>
<li><a href="#org38cce59">4. Demo</a></li>
<li><a href="#orgf6a8718">5. Using a theme</a></li>
<li><a href="#org1db930f">6. Customizing a theme</a></li>
<li><a href="#orgb9bfd09">7. Contributing</a>
<li><a href="#org2093188">4. Demo</a></li>
<li><a href="#org8f38af5">5. Using a theme</a></li>
<li><a href="#org8c35f14">6. Customizing a theme</a></li>
<li><a href="#orgccab0c7">7. Contributing</a>
<ul>
<li><a href="#org584ceea">7.1. Issues</a></li>
<li><a href="#org9afa6ad">7.2. Patches</a></li>
<li><a href="#orgedb6193">7.3. Donations</a></li>
<li><a href="#orgafa81e0">7.4. Follow me</a></li>
<li><a href="#org9376eae">7.1. Issues</a></li>
<li><a href="#org98718f0">7.2. Patches</a></li>
<li><a href="#org133f477">7.3. Donations</a></li>
<li><a href="#orgfedba07">7.4. Follow me</a></li>
</ul>
</li>
<li><a href="#org0006d60">8. License</a></li>
<li><a href="#org52ec452">8. License</a></li>
</ul>
</div>
</div>
@ -236,12 +236,12 @@
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" alt="btn_donate_LG.gif" />
</a>
<div id="outline-container-org271406f" class="outline-2">
<h2 id="org271406f"><span class="section-number-2">1</span> Overview</h2>
<div id="outline-container-org8c05a6c" class="outline-2">
<h2 id="org8c05a6c"><span class="section-number-2">1</span> Overview</h2>
<div class="outline-text-2" id="text-1">
</div>
<div id="outline-container-org57b436e" class="outline-3">
<h3 id="org57b436e"><span class="section-number-3">1.1</span> Description</h3>
<div id="outline-container-org7ef32b9" class="outline-3">
<h3 id="org7ef32b9"><span class="section-number-3">1.1</span> Description</h3>
<div class="outline-text-3" id="text-1-1">
<p>
Though you can easily override CSS stylesheets and add your own HTML themes, we
@ -267,8 +267,8 @@ Follow <a href="https://twitter.com/f_niessen">f_niessen</a> on Twitter for upda
</div>
</div>
<div id="outline-container-orgf636bc6" class="outline-3">
<h3 id="orgf636bc6"><span class="section-number-3">1.2</span> Requirements</h3>
<div id="outline-container-orgf25f59f" class="outline-3">
<h3 id="orgf25f59f"><span class="section-number-3">1.2</span> Requirements</h3>
<div class="outline-text-3" id="text-1-2">
<p>
Org mode version 8 (or later) is required.
@ -281,12 +281,12 @@ If such a version is not bundled with your Emacs, install one from ELPA.
</div>
</div>
<div id="outline-container-org2d10181" class="outline-2">
<h2 id="org2d10181"><span class="section-number-2">2</span> Quotations</h2>
<div id="outline-container-org319c020" class="outline-2">
<h2 id="org319c020"><span class="section-number-2">2</span> Quotations</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-orgf9cffb1" class="outline-3">
<h3 id="orgf9cffb1"><span class="section-number-3">2.1</span> About Bigblow</h3>
<div id="outline-container-org85e764e" class="outline-3">
<h3 id="org85e764e"><span class="section-number-3">2.1</span> About Bigblow</h3>
<div class="outline-text-3" id="text-2-1">
<p>
&ldquo;Very very nice, I enjoy it a lot.&rdquo; <br />
@ -327,8 +327,8 @@ wonderful package!&rdquo; <br />
</div>
</div>
<div id="outline-container-org1e8dad7" class="outline-3">
<h3 id="org1e8dad7"><span class="section-number-3">2.2</span> About ReadTheOrg</h3>
<div id="outline-container-org4a19e8a" class="outline-3">
<h3 id="org4a19e8a"><span class="section-number-3">2.2</span> About ReadTheOrg</h3>
<div class="outline-text-3" id="text-2-2">
<p>
&ldquo;OMG. The ReadTheOrg theme for exported HTML from org mode files is eye
@ -368,8 +368,8 @@ available.&rdquo; <br />
</div>
</div>
<div id="outline-container-org8d5591f" class="outline-2">
<h2 id="org8d5591f"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class="section-number-2">3</span> Gallery</h2>
<div id="outline-container-org5945207" class="outline-2">
<h2 id="org5945207"><a id="ID-79e0ed21-c3b0-4f00-bdab-29fbff9dcad4"></a><span class="section-number-2">3</span> Gallery</h2>
<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
@ -377,8 +377,8 @@ now! Well, I hope to have more than one in a couple of weeks&#x2026;
</p>
</div>
<div id="outline-container-org76921a5" class="outline-3">
<h3 id="org76921a5"><span class="section-number-3">3.1</span> Bigblow</h3>
<div id="outline-container-org9d62b96" class="outline-3">
<h3 id="org9d62b96"><span class="section-number-3">3.1</span> Bigblow</h3>
<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
@ -478,8 +478,8 @@ Keyboard shortcuts to save time and boost your productivity:
</div>
</div>
<div id="outline-container-orga5730a0" class="outline-3">
<h3 id="orga5730a0"><span class="section-number-3">3.2</span> ReadTheOrg</h3>
<div id="outline-container-orgff2b697" class="outline-3">
<h3 id="orgff2b697"><span class="section-number-3">3.2</span> ReadTheOrg</h3>
<div class="outline-text-3" id="text-3-2">
<p>
ReadTheOrg is a clone of the official &#x2013; and great! &#x2013; <a href="https://github.com/snide/sphinx_rtd_theme">theme</a>
@ -514,8 +514,8 @@ default structure of the HTML export)!
</div>
</div>
<div id="outline-container-org38cce59" class="outline-2">
<h2 id="org38cce59"><span class="section-number-2">4</span> Demo</h2>
<div id="outline-container-org2093188" class="outline-2">
<h2 id="org2093188"><span class="section-number-2">4</span> Demo</h2>
<div class="outline-text-2" id="text-4">
<p>
I&rsquo;ve written a demo page for the themes that provides a maximal working support
@ -529,16 +529,16 @@ admonitions, footnotes, tables and other details.
</div>
</div>
<div id="outline-container-orgf6a8718" class="outline-2">
<h2 id="orgf6a8718"><span class="section-number-2">5</span> Using a theme</h2>
<div id="outline-container-org8f38af5" class="outline-2">
<h2 id="org8f38af5"><span class="section-number-2">5</span> Using a theme</h2>
<div class="outline-text-2" id="text-5">
<p>
Using a theme from the <a href="#org8d5591f">theme gallery</a> for your own Org documents is very easy:
Using a theme from the <a href="#org5945207">theme gallery</a> for your own Org documents is very easy:
</p>
<ol class="org-ol">
<li><p>
You <b>add a <code>#+SETUPFILE:</code> directive</b> in the preamble of your document (to include
You <b>add a</b> <code>#+SETUPFILE:</code> <b>directive</b> in the preamble of your document (to include
the necessary CSS and JavaScript files).
</p>
@ -548,7 +548,7 @@ chosen theme:
</p>
<div class="org-src-container">
<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>
<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>
</pre>
</div>
@ -557,12 +557,13 @@ chosen theme:
</p>
<p>
or, if you <b>cloned or downloaded</b> the Org-HTML themes project, use a (relative
or absolute) path to the &ldquo;setup file&rdquo;:
or, if you <b>cloned or downloaded</b> the Org-HTML themes project &#x2013; to get no
dependency on an Internet connection &#x2013;, use a (relative or absolute) path to
the local &ldquo;setup file&rdquo;:
</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 class="src src-org"><span class="org-org-meta-line"> #+SETUPFILE: path/to/Git/repo/setup/THEME-NAME-local.setup</span>
</pre>
</div></li>
@ -572,8 +573,8 @@ with <code>C-c C-e h h</code>.</li>
</div>
</div>
<div id="outline-container-org1db930f" class="outline-2">
<h2 id="org1db930f"><span class="section-number-2">6</span> Customizing a theme</h2>
<div id="outline-container-org8c35f14" class="outline-2">
<h2 id="org8c35f14"><span class="section-number-2">6</span> Customizing a theme</h2>
<div class="outline-text-2" id="text-6">
<p>
You love those themes, but you still would like to override particular HTML
@ -598,12 +599,12 @@ change&#x2026;
</div>
</div>
<div id="outline-container-orgb9bfd09" class="outline-2">
<h2 id="orgb9bfd09"><span class="section-number-2">7</span> Contributing</h2>
<div id="outline-container-orgccab0c7" class="outline-2">
<h2 id="orgccab0c7"><span class="section-number-2">7</span> Contributing</h2>
<div class="outline-text-2" id="text-7">
</div>
<div id="outline-container-org584ceea" class="outline-3">
<h3 id="org584ceea"><span class="section-number-3">7.1</span> Issues</h3>
<div id="outline-container-org9376eae" class="outline-3">
<h3 id="org9376eae"><span class="section-number-3">7.1</span> Issues</h3>
<div class="outline-text-3" id="text-7-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>.
@ -611,8 +612,8 @@ Report issues and suggest features and improvements on the <a href="https://gith
</div>
</div>
<div id="outline-container-org9afa6ad" class="outline-3">
<h3 id="org9afa6ad"><span class="section-number-3">7.2</span> Patches</h3>
<div id="outline-container-org98718f0" class="outline-3">
<h3 id="org98718f0"><span class="section-number-3">7.2</span> Patches</h3>
<div class="outline-text-3" id="text-7-2">
<p>
I love contributions! Patches under any form are always welcome!
@ -620,8 +621,8 @@ I love contributions! Patches under any form are always welcome!
</div>
</div>
<div id="outline-container-orgedb6193" class="outline-3">
<h3 id="orgedb6193"><span class="section-number-3">7.3</span> Donations</h3>
<div id="outline-container-org133f477" class="outline-3">
<h3 id="org133f477"><span class="section-number-3">7.3</span> Donations</h3>
<div class="outline-text-3" id="text-7-3">
<p>
If you use the org-html-themes project (or any of <a href="https://github.com/fniessen/">my other projects</a>) and feel it
@ -637,8 +638,8 @@ beer and as in speech.
</div>
</div>
<div id="outline-container-orgafa81e0" class="outline-3">
<h3 id="orgafa81e0"><span class="section-number-3">7.4</span> Follow me</h3>
<div id="outline-container-orgfedba07" class="outline-3">
<h3 id="orgfedba07"><span class="section-number-3">7.4</span> Follow me</h3>
<div class="outline-text-3" id="text-7-4">
<p>
I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitter. You should follow it.
@ -647,8 +648,8 @@ I have an <a href="https://twitter.com/f_niessen">f_niessen</a> account on Twitt
</div>
</div>
<div id="outline-container-org0006d60" class="outline-2">
<h2 id="org0006d60"><span class="section-number-2">8</span> License</h2>
<div id="outline-container-org52ec452" class="outline-2">
<h2 id="org52ec452"><span class="section-number-2">8</span> License</h2>
<div class="outline-text-2" id="text-8">
<p>
Copyright (C) 2011-2018 Fabrice Niessen.

View File

@ -169,112 +169,29 @@ admonitions, footnotes, tables and other details.
Using a theme from the [[id:79e0ed21-c3b0-4f00-bdab-29fbff9dcad4][theme gallery]] for your own Org documents is very easy:
1. You *add a =#+SETUPFILE:= directive* in the preamble of your document (to include
1. You *add a* =#+SETUPFILE:= *directive* in the preamble of your document (to include
the necessary CSS and JavaScript files).
You can either use an URL of the following type for the "setup file" of your
chosen theme:
#+begin_src org :exports code
,#+SETUPFILE: https://fniessen.github.io/org-html-themes/setup/THEME-NAME.setup
#+end_src
#+begin_src org :exports code
,#+SETUPFILE: https://fniessen.github.io/org-html-themes/setup/THEME-NAME.setup
#+end_src
(where ~THEME-NAME~ is ~theme-bigblow~ or ~theme-readtheorg~)
(where ~THEME-NAME~ is ~theme-bigblow~ or ~theme-readtheorg~)
or, if you *cloned or downloaded* the Org-HTML themes project, use a (relative
or absolute) path to the "setup file":
or, if you *cloned or downloaded* the Org-HTML themes project -- to get no
dependency on an Internet connection --, use a (relative or absolute) path to
the local "setup file":
#+begin_src org :exports code
,#+SETUPFILE: path/to/Git/repo/setup/THEME-NAME.setup
#+end_src
#+begin_src org :exports code
,#+SETUPFILE: path/to/Git/repo/setup/THEME-NAME-local.setup
#+end_src
2. Then, you *export* your Org mode file *to HTML* with =org-html-export-to-html= or
with =C-c C-e h h=.
# ** Bigblow :noexport:
#
# In order to use the Bigblow style, just copy the [[file:setup/theme-bigblow.setup][theme-bigblow.setup]] file to
# your project and link to it this way:
#
# #+begin_src org :exports code
# ,#+SETUPFILE: theme-bigblow.setup
# #+end_src
#
# If you prefer, you can add the content of the setup file at the beginning of
# your Org file instead:
#
# #+begin_src org :exports code :tangle setup/theme-bigblow.setup
# # -*- mode: org; -*-
#
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/styles/bigblow/css/htmlize.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/styles/bigblow/css/bigblow.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/styles/bigblow/css/hideshow.css"/>
#
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/jquery-1.11.0.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
#
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/jquery.localscroll-min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/jquery.zclip.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/bigblow.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/bigblow/js/hideshow.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/lib/js/jquery.stickytableheaders.min.js"></script>
# #+end_src
#
# #+begin_src org :exports code :tangle setup/theme-bigblow-local.setup
# # -*- mode: org; -*-
#
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/htmlize.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/bigblow.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/bigblow/css/hideshow.css"/>
#
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-1.11.0.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>
#
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.localscroll-min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/jquery.zclip.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/bigblow.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/bigblow/js/hideshow.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/lib/js/jquery.stickytableheaders.min.js"></script>
# #+end_src
#
# ** Readtheorg :noexport:
#
# In order to use the ReadTheOrg style, just copy the [[file:setup/theme-readtheorg.setup][theme-readtheorg.setup]] file
# to your project and link to it this way:
#
# #+begin_src org :exports code
# ,#+SETUPFILE: theme-readtheorg.setup
# #+end_src
#
# If you prefer, you can add the content of the setup file at the beginning of
# your Org file instead:
#
# #+begin_src org :exports code :tangle setup/theme-readtheorg.setup
# # -*- mode: org; -*-
#
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/styles/readtheorg/css/htmlize.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/styles/readtheorg/css/readtheorg.css"/>
#
# ,#+HTML_HEAD: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
# ,#+HTML_HEAD: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/lib/js/jquery.stickytableheaders.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/styles/readtheorg/js/readtheorg.js"></script>
# #+end_src
#
# #+begin_src org :exports code :tangle setup/theme-readtheorg-local.setup
# # -*- mode: org; -*-
#
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/readtheorg/css/htmlize.css"/>
# ,#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="styles/readtheorg/css/readtheorg.css"/>
#
# ,#+HTML_HEAD: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
# ,#+HTML_HEAD: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/lib/js/jquery.stickytableheaders.min.js"></script>
# ,#+HTML_HEAD: <script type="text/javascript" src="styles/readtheorg/js/readtheorg.js"></script>
# #+end_src
* Customizing a theme
You love those themes, but you still would like to override particular HTML