Hi everyone, I've been using the excellent org-html-slideshow ( https://github.com/relevance/org-html-slideshow) to generate HTML slides from org-mode, and it's been working well for me for years.
It generates HTML slides from org-mode using the org-mode heading hierarchy. Tag any heading with the org-tag :slide: and that heading and its contents automatically become their own slide once you export to HTML using org-export-dispatch. I prefer org-html-slideshow to org-reveal since it allows me the ability to easily customize the look and feel of slides—by creating a custom slide—simply by adding an org-tag. So if I tag an org-heading with the tag :fullscreenslide: for example (so that the heading looks like * Heading :slide:fullscreenslide:), it will then export that slide to HTML with class="fullscreenslide" — and I can then use CSS to customize the look and feel of all slides with that class. Org-html-slideshow also offers a great Presenter View, which opens in a separate tab in your browser, and displays your speaker notes, the current slide, and the next slide. Unfortunately, org-html-slideshow is no longer being actively developed, and a recent update to org-mode has broken the way Presenter View functions. Somehow with the new org-mode updates, the "next slide" view in Presenter Notes mode no longer advances correctly. The "next slide" slide gets stuck in a loop of 4-5 slides, and just repeats those few slides. It does not reliably show you what the next slide is going to be. I notice that the output from example.org when I export to HTML is fairly different from the example.html that's in the repo. Something in those differences is breaking the ability of Presenter Notes to advance to the next slide: https://gist.github.com/incandescentman/dca040c750a3e9e7e687942d69ebd53f Anyone else using org-html-slideshow? Does anyone have any thoughts on how to get this working again? Thanks!
diff --git a/example.html b/example.html index 2dd0b5e..49ba097 100755 --- a/example.html +++ b/example.html @@ -3,199 +3,73 @@ "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-03-03 Fri 12:27 --> +<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> +<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Example Presentation</title> -<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> -<meta name="generator" content="Org-mode" /> - -<style type="text/css"> - <!--/*--><![CDATA[/*><!--*/ - .title { text-align: center; } - .todo { font-family: monospace; color: red; } - .done { color: green; } - .tag { background-color: #eee; font-family: monospace; - padding: 2px; font-size: 80%; font-weight: normal; } - .timestamp { color: #bebebe; } - .timestamp-kwd { color: #5f9ea0; } - .right { margin-left: auto; margin-right: 0px; text-align: right; } - .left { margin-left: 0px; margin-right: auto; text-align: left; } - .center { margin-left: auto; margin-right: auto; text-align: center; } - .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;} - pre.src-sh:before { content: 'sh'; } - pre.src-bash:before { content: 'sh'; } - pre.src-emacs-lisp:before { content: 'Emacs Lisp'; } - pre.src-R:before { content: 'R'; } - pre.src-perl:before { content: 'Perl'; } - pre.src-java:before { content: 'Java'; } - pre.src-sql:before { content: 'SQL'; } - - table { border-collapse:collapse; } - td, th { vertical-align:top; } - th.right { text-align: center; } - th.left { text-align: center; } - th.center { text-align: center; } - td.right { text-align: right; } - td.left { text-align: left; } - td.center { text-align: center; } - dt { font-weight: bold; } - .footpara:nth-child(2) { display: inline; } - .footpara { display: block; } - .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; } - /*]]>*/--> -</style> +<meta name="generator" content="Org mode" /> +<meta name="author" content="Stuart Sierra" /> <link rel="stylesheet" type="text/css" href="src/css/common.css" /> <link rel="stylesheet" type="text/css" href="src/css/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="src/css/projection.css" media="projection" /> <link rel="stylesheet" type="text/css" href="src/css/presenter.css" media="presenter" /> -<script type="text/javascript"> -/* -@licstart The following is the entire license notice for the -JavaScript code in this tag. - -Copyright (C) 2012 Free Software Foundation, Inc. - -The JavaScript code in this tag is free software: you can -redistribute it and/or modify it under the terms of the GNU -General Public License (GNU GPL) as published by the Free Software -Foundation, either version 3 of the License, or (at your option) -any later version. The code is distributed WITHOUT ANY WARRANTY; -without even the implied warranty of MERCHANTABILITY or FITNESS -FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - -As additional permission under GNU GPL version 3 section 7, you -may distribute non-source (e.g., minimized or compacted) forms of -that code without the copy of the GNU GPL normally required by -section 4, provided you include this license notice and a URL -through which recipients can access the Corresponding Source. - - -@licend The above is the entire license notice -for the JavaScript code in this tag. -*/ -<!--/*--><![CDATA[/*><!--*/ - function CodeHighlightOn(elem, id) - { - var target = document.getElementById(id); - if(null != target) { - elem.cacheClassElem = elem.className; - elem.cacheClassTarget = target.className; - target.className = "code-highlighted"; - elem.className = "code-highlighted"; - } - } - function CodeHighlightOff(elem, id) - { - var target = document.getElementById(id); - if(elem.cacheClassElem) - elem.className = elem.cacheClassElem; - if(elem.cacheClassTarget) - target.className = elem.cacheClassTarget; - } -/*]]>*///--> -</script> </head> <body> <div id="content"> <h1 class="title">Example Presentation</h1> <p>Type <strong>T</strong> to begin the slide show.</p> -<div id="outline-container-sec-1" class="outline-2"> -<h2 id="sec-1">Org-HTML-Slideshow   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-1"> +<div id="outline-container-org6d992b4" class="outline-2"> +<h2 id="org6d992b4">Org-HTML-Slideshow   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-org6d992b4"> <p> Make slides from Emacs Org-Mode! </p> </div> -<div id="outline-container-sec-1-1" class="outline-3"> -<h3 id="sec-1-1">Making Slides   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-1-1"> +<div id="outline-container-org33f9443" class="outline-3"> +<h3 id="org33f9443">Making Slides   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org33f9443"> <p> Org-Mode headlines with the <code>:slide:</code> tag will become slides. </p> </div> </div> -<div id="outline-container-sec-1-2" class="outline-3"> -<h3 id="sec-1-2">Headlines Don't Have to be Slides</h3> -<div class="outline-text-3" id="text-1-2"> + +<div id="outline-container-org1cf8804" class="outline-3"> +<h3 id="org1cf8804">Headlines Don't Have to be Slides</h3> +<div class="outline-text-3" id="text-org1cf8804"> <p> This section doesn't have a <code>:slide:</code> tag, so it will <b>not</b> become a slide, although it is still part of the exported HTML document. </p> </div> </div> -<div id="outline-container-sec-1-3" class="outline-3"> -<h3 id="sec-1-3">Use Lists For Bullets   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-1-3"> + +<div id="outline-container-org635a617" class="outline-3"> +<h3 id="org635a617">Use Lists For Bullets   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org635a617"> <ul class="org-ul"> -<li>Use Org-Mode lists for bullet points -</li> +<li>Use Org-Mode lists for bullet points</li> <li>You can make nested bullet lists <ul class="org-ul"> -<li>With sub-lists -</li> -<li>Like this -</li> -</ul> -</li> +<li>With sub-lists</li> +<li>Like this</li> +</ul></li> </ul> </div> </div> -<div id="outline-container-sec-1-4" class="outline-3"> -<h3 id="sec-1-4">Or Low-Level Headings   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-1-4"> -</div><ul class="org-ul"><li>By default<br /><ul class="org-ul"><li>Org-Mode headings below level 3<br /><ul class="org-ul"><li>Become bullets<br /></li> -<li>Meaning they <b>cannot</b> be slides<br /></li></ul> -</li></ul> -</li> -<li>This is configurable<br /><ul class="org-ul"><li>See <a href="http://orgmode.org/manual/Export-options.html";>Export Options in the Org-Mode manual</a><br /></li></ul> -</li></ul> +<div id="outline-container-org52cefb8" class="outline-3"> +<h3 id="org52cefb8">Or Low-Level Headings   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org52cefb8"> +</div><ul class="org-ul"><li><a id="orga52bba7"></a>By default<br /><ul class="org-ul"><li><a id="org50cc659"></a>Org-Mode headings below level 3<br /><ul class="org-ul"><li><a id="orgf403fa7"></a>Become bullets<br /></li> +<li><a id="org02d9f2d"></a>Meaning they <b>cannot</b> be slides<br /></li></ul></li></ul></li> +<li><a id="org32d810e"></a>This is configurable<br /><ul class="org-ul"><li><a id="org90bbe72"></a>See <a href="http://orgmode.org/manual/Export-options.html";>Export Options in the Org-Mode manual</a><br /></li></ul></li></ul> </div> -<div id="outline-container-sec-1-5" class="outline-3"> -<h3 id="sec-1-5">Slides Can Be Nested   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-1-5"> + +<div id="outline-container-org46397e8" class="outline-3"> +<h3 id="org46397e8">Slides Can Be Nested   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org46397e8"> <p> You can use the structure of the Org-Mode document to group your slides. </p> @@ -205,9 +79,9 @@ For example, this slide is a <b>level-2</b> Org-Mode heading. </p> </div> -<div id="outline-container-sec-1-5-1" class="outline-4"> -<h4 id="sec-1-5-1">Slide Headings Can Be Nested   <span class="tag"><span class="slide">slide</span></span></h4> -<div class="outline-text-4" id="text-1-5-1"> +<div id="outline-container-org331e7f8" class="outline-4"> +<h4 id="org331e7f8">Slide Headings Can Be Nested   <span class="tag"><span class="slide">slide</span></span></h4> +<div class="outline-text-4" id="text-org331e7f8"> <p> This slide is a <b>level-3</b> Org-Mode heading, inside the previous one. </p> @@ -215,140 +89,119 @@ This slide is a <b>level-3</b> Org-Mode heading, inside the previous one. </div> </div> </div> -<div id="outline-container-sec-2" class="outline-2"> -<h2 id="sec-2">Presenter Notes   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-2"> + +<div id="outline-container-orgc3f3869" class="outline-2"> +<h2 id="orgc3f3869">Presenter Notes   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-orgc3f3869"> <ul class="org-ul"> -<li>Slides can have presenter notes -</li> -<li>Add a sub-heading with the <code>:notes:</code> tag -</li> +<li>Slides can have presenter notes</li> +<li>Add a sub-heading with the <code>:notes:</code> tag</li> </ul> </div> -<div id="outline-container-sec-2-1" class="outline-3"> -<h3 id="sec-2-1">A Slide with Notes   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-2-1"> +<div id="outline-container-org6418fa3" class="outline-3"> +<h3 id="org6418fa3">A Slide with Notes   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org6418fa3"> <ul class="org-ul"> -<li>This slide has notes -</li> -<li>Notes are only visible to presenter -</li> +<li>This slide has notes</li> +<li>Notes are only visible to presenter</li> </ul> </div> -<div id="outline-container-sec-2-1-1" class="outline-4"> -<h4 id="sec-2-1-1">Notes   <span class="tag"><span class="notes">notes</span></span></h4> -<div class="outline-text-4" id="text-2-1-1"> +<div id="outline-container-org7987c5e" class="outline-4"> +<h4 id="org7987c5e">Notes   <span class="tag"><span class="notes">notes</span></span></h4> +<div class="outline-text-4" id="text-org7987c5e"> <ul class="org-ul"> -<li>Presenter notes for this slide -</li> -<li>Not displayed as part of the slide -</li> -<li>Displayed in Presenter Preview window -</li> -<li>Only one <code>:notes:</code> section per slide allowed -</li> +<li>Presenter notes for this slide</li> +<li>Not displayed as part of the slide</li> +<li>Displayed in Presenter Preview window</li> +<li>Only one <code>:notes:</code> section per slide allowed</li> </ul> </div> </div> </div> </div> -<div id="outline-container-sec-3" class="outline-2"> -<h2 id="sec-3">Source Code   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-3"> + +<div id="outline-container-org73153ca" class="outline-2"> +<h2 id="org73153ca">Source Code   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-org73153ca"> <p> Use <code>begin_src/end_src</code> blocks to include source code. </p> <div class="org-src-container"> - -<pre class="src src-clojure">(<span class="org-keyword">defn</span> <span class="org-function-name">example</span> [] - (<span class="org-builtin">println</span> <span class="org-string">"This is sample source code."</span>)) +<pre class="src src-clojure">(defn example [] + (println "This is sample source code.")) </pre> </div> </div> -<div id="outline-container-sec-3-1" class="outline-3"> -<h3 id="sec-3-1">Syntax Highlighting   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-3-1"> +<div id="outline-container-orgdfd8da1" class="outline-3"> +<h3 id="orgdfd8da1">Syntax Highlighting   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-orgdfd8da1"> <ul class="org-ul"> -<li>Org-Mode HTML export uses <a href="http://www.emacswiki.org/emacs/Htmlize";>htmlize.el</a> -</li> +<li>Org-Mode HTML export uses <a href="http://www.emacswiki.org/emacs/Htmlize";>htmlize.el</a></li> <li>Code in exported HTML will match your current Emacs theme <ul class="org-ul"> -<li>Choose a theme that looks good on a projector! -</li> -</ul> -</li> +<li>Choose a theme that looks good on a projector!</li> +</ul></li> </ul> </div> </div> -<div id="outline-container-sec-3-2" class="outline-3"> -<h3 id="sec-3-2">Syntax Highlighting with CSS Classes   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-3-2"> + +<div id="outline-container-orgc24254f" class="outline-3"> +<h3 id="orgc24254f">Syntax Highlighting with CSS Classes   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-orgc24254f"> <ul class="org-ul"> <li>Set the Emacs variable <ul class="org-ul"> -<li><code>org-export-htmlize-output-type</code> -</li> -<li>to the symbol <code>css</code> -</li> -<li>(Does not work as a buffer-local variable) -</li> -</ul> -</li> +<li><code>org-export-htmlize-output-type</code></li> +<li>to the symbol <code>css</code></li> +<li>(Does not work as a buffer-local variable)</li> +</ul></li> <li>Htmlize.el will add SPAN tags with CSS classes <ul class="org-ul"> -<li>Named for each font face, e.g. <code>org-comment</code> -</li> -</ul> -</li> -<li>Examine HTML output to see class names -</li> -<li>Add CSS styles to set colors -</li> +<li>Named for each font face, e.g. <code>org-comment</code></li> +</ul></li> +<li>Examine HTML output to see class names</li> +<li>Add CSS styles to set colors</li> </ul> </div> </div> </div> -<div id="outline-container-sec-4" class="outline-2"> -<h2 id="sec-4">Images   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-4"> + +<div id="outline-container-org872a4e3" class="outline-2"> +<h2 id="org872a4e3">Images   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-org872a4e3"> <ul class="org-ul"> <li>Slides can contain images <ul class="org-ul"> -<li>Any file type a browser can display -</li> -</ul> -</li> +<li>Any file type a browser can display</li> +</ul></li> <li>See also these Emacs variables: <ul class="org-ul"> -<li><code>org-export-html-inline-images</code> -</li> +<li><code>org-export-html-inline-images</code></li> <li><code>org-export-html-inline-image-extensions</code> <ul class="org-ul"> -<li>Controls which file types get exported -</li> -</ul> -</li> -</ul> -</li> -<li>See <a href="http://orgmode.org/manual/Images-in-HTML-export.html";>Images in HTML Export in the Org-Mode manual</a>. -</li> +<li>Controls which file types get exported</li> +</ul></li> +</ul></li> +<li>See <a href="http://orgmode.org/manual/Images-in-HTML-export.html";>Images in HTML Export in the Org-Mode manual</a>.</li> </ul> </div> -<div id="outline-container-sec-4-1" class="outline-3"> -<h3 id="sec-4-1">Slide with Image   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-4-1"> +<div id="outline-container-org9233c38" class="outline-3"> +<h3 id="org9233c38">Slide with Image   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-org9233c38"> <p> Make a <code>file:</code> link with the path to the image and no link text. </p> <div class="figure"> -<p><img src="example-image.svg" alt="example-image.svg" /></p> +<p><object type="image/svg+xml" data="example-image.svg" class="org-svg"> +Sorry, your browser does not support SVG.</object> +</p> </div> <p> @@ -357,40 +210,36 @@ This example image is public-domain <a href="http://openclipart.org/detail/16555 </div> </div> </div> -<div id="outline-container-sec-5" class="outline-2"> -<h2 id="sec-5">Styling   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-5"> + +<div id="outline-container-orgafdeae0" class="outline-2"> +<h2 id="orgafdeae0">Styling   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-orgafdeae0"> <ul class="org-ul"> -<li>Use CSS styles to control appearance of slides -</li> -<li>Extra tags on a slide become extra CSS classes on its HTML -</li> +<li>Use CSS styles to control appearance of slides</li> +<li>Extra tags on a slide become extra CSS classes on its HTML</li> </ul> </div> -<div id="outline-container-sec-5-1" class="outline-3"> -<h3 id="sec-5-1">Org-Mode Tag as CSS Class   <span class="tag"><span class="slide">slide</span> <span class="blue_background">blue_background</span></span></h3> -<div class="outline-text-3" id="text-5-1"> +<div id="outline-container-orge58db10" class="outline-3"> +<h3 id="orge58db10">Org-Mode Tag as CSS Class   <span class="tag"><span class="slide">slide</span> <span class="blue_background">blue_background</span></span></h3> +<div class="outline-text-3" id="text-orge58db10"> <ul class="org-ul"> <li>This slide has the <code>:blue_background:</code> tag <ul class="org-ul"> -<li>Which is a class defined in <code>projection.css</code> -</li> -</ul> -</li> +<li>Which is a class defined in <code>projection.css</code></li> +</ul></li> <li>Make up your own tags <ul class="org-ul"> -<li>Add them to the CSS file -</li> -</ul> -</li> +<li>Add them to the CSS file</li> +</ul></li> </ul> </div> </div> </div> -<div id="outline-container-sec-6" class="outline-2"> -<h2 id="sec-6">Placing Stylesheets/JavaScript   <span class="tag"><span class="slide">slide</span></span></h2> -<div class="outline-text-2" id="text-6"> + +<div id="outline-container-org6bf61f0" class="outline-2"> +<h2 id="org6bf61f0">Placing Stylesheets/JavaScript   <span class="tag"><span class="slide">slide</span></span></h2> +<div class="outline-text-2" id="text-org6bf61f0"> <p> Include the stylesheets and JavaScript at the <b>bottom</b> of your Org-Mode file. </p> @@ -400,20 +249,17 @@ They must go at the bottom because the Google Closure Library does not support a </p> </div> -<div id="outline-container-sec-6-1" class="outline-3"> -<h3 id="sec-6-1">Warning About Hidden Headlines   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-6-1"> +<div id="outline-container-orgdd5058f" class="outline-3"> +<h3 id="orgdd5058f">Warning About Hidden Headlines   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-orgdd5058f"> <p> Stylesheets and JavaScript will <b>not</b> be loaded if the <b>last</b> headline in your Org-Mode file is hidden by any of: </p> <ul class="org-ul"> -<li><code>COMMENT</code> at the start of the heading -</li> -<li><code>#+COMMENT</code> at the start of the line -</li> -<li><code>:noexport:</code> tag, or missing <code>:export:</code> tag -</li> +<li><code>COMMENT</code> at the start of the heading</li> +<li><code>#+COMMENT</code> at the start of the line</li> +<li><code>:noexport:</code> tag, or missing <code>:export:</code> tag</li> </ul> <p> @@ -421,9 +267,10 @@ See <a href="http://orgmode.org/manual/Comment-lines.html";>Comment lines</a> and </p> </div> </div> -<div id="outline-container-sec-6-2" class="outline-3"> -<h3 id="sec-6-2">The End   <span class="tag"><span class="slide">slide</span></span></h3> -<div class="outline-text-3" id="text-6-2"> + +<div id="outline-container-orgcb252ac" class="outline-3"> +<h3 id="orgcb252ac">The End   <span class="tag"><span class="slide">slide</span></span></h3> +<div class="outline-text-3" id="text-orgcb252ac"> <p> Sometimes it's safest to add an "empty" heading at the end of your document to make sure the stylesheets and JavaScript are included. </p> @@ -435,7 +282,7 @@ Sometimes it's safest to add an "empty" heading at the end of your document to m </div> <div id="postamble" class="status"> <p class="author">Author: Stuart Sierra</p> -<p class="creator"><a href="http://www.gnu.org/software/emacs/";>Emacs</a> 24.3.1 (<a href="http://orgmode.org";>Org</a> mode N/A)</p> +<p class="date">Created: 2017-03-03 Fri 12:27</p> <p class="validation"><a href="http://validator.w3.org/check?uri=referer";>Validate</a></p> </div> </body>
