~ and ~

~ tags, called prologue, and their closing counterparts, called epilogue. Specify those contents by options ~REVEAL_PROLOGUE~ and ~REVEAL_EPILOGUE~ for one buffer, or by variable ~org-reveal-prologue~ and ~org-reveal-epilogue~ for global setup. ** Raw HTML in Slides Besides the Org contents, you can embed raw HTML contents into slides by placing a =#+REVEAL_HTML= keyword. The famous cat jump fail: #+REVEAL_HTML: ** Speaker Notes Reveal.js supports speaker notes, which are displayed in a separate browser window. Pressing 's' on slide's windows will pop up a window displaying the current slide, the next slide and the speaker notes on the current slide. Org-reveal recognize texts between =#+BEGIN_NOTES= and =#+END_NOTES= as speaker notes. See the example below. #+BEGIN_SRC org ,* Heading 1 Some contents. ,#+BEGIN_NOTES Enter speaker notes here. ,#+END_NOTES #+END_SRC To skip exporting speaker notes, please set variable ~org-reveal-ignore-speaker-notes~ to ~t~. #+REVEAL: split Speaker notes requires the ~notes~ plug-in. If you changed default plug-in setting by specifying =#+REVEAL_PLUGINS= or by setting variable =org-reveal-plugins=, please make sure ~notes~ is in the plug-in list to enable speaker notes. #+REVEAL: split Due to a bug in Reveal.js, sometimes the speaker notes window shows only blank screens. A workaround to this issue is to put the presentation HTML file into the Reveal.js root directory and reopen it in the browser. ** Multiplexing Reveal.js supports a [[https://github.com/reveal/multiplex#multiplex-plugin][multiplexing plugin]], which allows your audience to view the slides of the presentation you are controlling on their own phone, tablet or laptop. As the master presentation navigates the slides, all client presentations will update in real time. See a demo at [[https://reveal-multiplex.glitch.me/]]. To use multiplexing, first prepare a Socket.io server by the instruction [[https://github.com/reveal/multiplex#socketio-server][here]]. Then include the following options in the org file. Contents in ~[]~ are commentary notes, not part of the options. #+BEGIN_SRC org ,#+REVEAL_MULTIPLEX_ID: [Obtained from the socket.io server. ] ,#+REVEAL_MULTIPLEX_SECRET: [Obtained from socket.io server. Gives the master control of the presentation.] ,#+REVEAL_MULTIPLEX_URL: https://reveal-multiplex.glitch.me [Location of socket.io server] #+END_SRC If your are using Reveal.js 3.x, an extra option is necessary for Socket.io scripts. #+BEGIN_SRC org ,#+REVEAL_MULTIPLEX_SOCKETIO_URL: http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js #+END_SRC You must generate unique values for the =REVEAL_MULTIPLEX_ID= and =REVEAL_MULTIPLEX_SECRET= options, obtaining these from the socket.io server you are using. If you include these options in your .org file, reveal-org will enable your .html file as the master file for multiplexing and will generate a file named in the form =[filename]_client.html= in the same directory as the client .html file. Provide your audience with a link to the client file to allow them to track your presentation on their own device. ** Extra Stylesheets and Script Sources Set =REVEAL_EXTRA_CSS= to a stylesheet file path to load extra custom styles after loading a theme. Set =REVEAL_EXTRA_SCRIPT_SRC= to script file path to load extra script sources. In case of multiple script files, specify each of them by one =REVEAL_EXTRA_SCRIPT_SRC= line. The specified scripts is loaded after Reveal.js initialization. Scripts that must be loaded before Reveal.js initialization can be set by one or more =REVEAL_EXTRA_SCRIPT_BEFORE_SRC= lines. #+BEGIN_SRC org ,#+REVEAL_EXTRA_CSS: url-to-custom-stylesheet.css ,#+REVEAL_EXTRA_SCRIPT_SRC: url-to-custom-script #+END_SRC Same setup can be done globally by customize variables ~org-reveal-extra-css~, ~org-reveal-extra-script-src~ and ~org-reveal-extra-script-before-src~. In case of multiple script files, organize the script file names as a list. ** Select Built-In Scripts Set option =REVEAL_PLUGINS= or variable =org-reveal-plugins= to a lisp list to select built-in scripts. Available built-in scripts are: classList/markdown/highlight/zoom/notes/search/remotes. Default built-ins are: classList/markdown/highlight/zoom/notes/multiplex. The following examples select /markdown/ and /highlight/ only. #+BEGIN_SRC org ,#+REVEAL_PLUGINS: (markdown highlight) #+END_SRC ** Extra Dependent Script Set =REVEAL_EXTRA_JS= to the url of extra reveal.js dependent script if necessary. #+BEGIN_SRC org ,#+REVEAL_EXTRA_JS: url-to-custom-script.js #+END_SRC ** Extra Slide Attribute Set property =reveal_extra_attr= to headings to add any necessary attributes to slides. ** Export into Single File By setting option =reveal_single_file= to ~t~, images and necessary Reveal.js scripts will be embedded into the exported HTML file, to make a portable HTML. Please note that remote images will /not/ be included in the single file, so presentations with remote images will still require an Internet connection. Attention: This needs locally available reveal.js files! #+BEGIN_SRC org ,#+OPTIONS: reveal_single_file:t #+END_SRC When exporting into single file, functions provided by Reveal.js libraries will be disabled due to limitation, including PDF export, Markdown support, zooming, speaker notes and remote control. Code highlight by highlight.js is also disabled. But *code highlight by Emacs is not effected.* ** Export Current Subtree Use menu entry " C-c C-e R S" to export only current subtree, without the title slide and the table of content, for a quick preview of your current edition. ** Skip headings Any heading with tag ~:noexport:~ will be discarded when exporting to all backends. If you want a heading being discard when exporting to Reveal.js only, please use tag ~:noexport_reveal:~. * Tips ** Managing Table of Contents It is well often the automatic "Table of Contents" is too large to fit into one slide. One workaround is to disable the automatic TOC and generate one manually, which can be split into multiple slides. Org-reveal provides a helper function to insert a TOC to the current org buffer. Type ~M-x org-reveal-manual-toc~ to invoke it. To disable the automatic TOC, add =toc:nil= to =#+OPTIONS= #+BEGIN_SRC org ,#+OPTIONS: toc:nil #+END_SRC ** Internal Links Reveal.js supports only jump between slides, but not between elements on slides. Thus, we can only link to headlines in an Org document. You can create links pointing to a headline's text, or its custom-id, as the examples below: * [[Tips]]. * [[#my-heading][Heading]] with a =CUSTOM_ID= property. ** Custom JS To pass custom JS code to ~Reveal.initialize~, state the code by ~#+REVEAL_EXTRA_INITIAL_JS~ (multiple statements are concatenated) or by custom variable ~org-reveal-extra-initial-js~. The first appearance of ~%s~ in the script will be replaced by Reveal.js root path. If you want to add extra code outside of the ~Reveal.initialize~ block, then ~#+REVEAL_EXTRA_SCRIPT~ can be used. The code will be inserted after closing the ~Reveal.initialize~ statement, but before the closing ~~ tag. ** Executable Source Blocks To allow live execution of code in some languages, enable the klipse plugin by setting ~org-reveal-klipsify-src~ to non-nil. Src blocks with the languages ~js~, ~clojure~, ~html~, ~python~, ~ruby~, ~scheme~, ~php~ will be executed with output shown in a console-like environment. See the source code of ~org-reveal-src-block~ for more details. *** HTML Src Block #+BEGIN_SRC html

hello, what's your name

#+END_SRC *** Javascript Src Block #+BEGIN_SRC js console.log("success"); var x='string using single quote'; x #+END_SRC *** Perl Src Block (not klipsified) #+BEGIN_SRC perl I don't know perl! #+END_SRC ** Properties for Sub-headings If you want to have multiple reveal presentations in a single Org-mode file, you might want to switch from file-based properties like: #+BEGIN_SRC org ,#+REVEAL_HLEVEL: 2 ,#+REVEAL_INIT_OPTIONS: transition: 'cube' ,#+REVEAL_THEME: moon #+END_SRC to properties of sub-headings like: #+BEGIN_SRC org :PROPERTIES: :EXPORT_REVEAL_HLEVEL: 2 :EXPORT_INIT_OPTIONS: transition: 'cube' :EXPORT_REVEAL_THEME: moon :END: #+END_SRC This way, each org-reveal presentation can have its own settings. An example heading with corresponding settings would look like: #+BEGIN_SRC org ,* My org-reveal presentation among many within the same Org-mode file :PROPERTIES: :reveal_overview: t :EXPORT_AUTHOR: Test Author :EXPORT_DATE: 2018-01-01 :EXPORT_TITLE: My Title :EXPORT_EMAIL: Test@example.com :EXPORT_OPTIONS: num:nil toc:nil reveal_keyboard:t reveal_overview:t :EXPORT_REVEAL_HLEVEL: 3 :EXPORT_REVEAL_MARGIN: 200 :END: #+END_SRC ** Customize iframe background slide :PROPERTIES: :reveal_background_iframe: https://hakim.se :reveal_background: rgb(0,0,0) :reveal_background_opacity: 0.8 :reveal_background_position: absolute :reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px :END: #+REVEAL_HTML: #+BEGIN_SRC org :reveal_background_position: absolute :reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px #+END_SRC #+REVEAL_HTML: * Thanks Courtesy to: #+ATTR_REVEAL: :frag roll-in The powerful Org-mode, #+ATTR_REVEAL: :frag roll-in the impressive Reveal.js #+ATTR_REVEAL: :frag roll-in and the precise MathJax