13.9.13 JavaScript supported display of web pages
Sebastian Rose has written a JavaScript program especially designed to allow two different ways of viewing HTML files created with Org. One is an Info-like mode where each section is displayed separately and navigation can be done with the n and p keys, and some other keys as well, press ? for an overview of the available keys. The second one has a folding view, much like Org provides inside Emacs. The script is available at https://orgmode.org/org-info.js and the documentation at https://orgmode.org/worg/code/org-info-js/. The script is hosted on https://orgmode.org, but for reliability, prefer installing it on your own web server.
To use this program, just add this line to the Org file:
#+INFOJS_OPT: view:info toc:nil
The HTML header now has the code needed to automatically invoke the script. For setting options, use the syntax from the above line for options described below:
‘path:’
The path to the script. The default is to grab the script from https://orgmode.org/org-info.js, but you might want to have a local copy and use a path like ‘../scripts/org-info.js’.
‘view:’
Initial view when the website is first shown. Possible values are:
‘info’ | Info-like interface with one section per page |
‘overview’ | Folding interface, initially showing only top-level |
‘content’ | Folding interface, starting with all headlines visible |
‘showall’ | Folding interface, all headlines and text visible |
‘sdepth:’
Maximum headline level still considered as an independent section for info and folding modes. The default is taken from org-export-headline-levels, i.e., the ‘H’ switch in ‘OPTIONS’. If this is smaller than in org-export-headline-levels, each info/folding section can still contain child headlines.
‘toc:’
Should the table of contents initially be visible? Even when ‘nil’, you can always get to the “toc" with i.
‘tdepth:’
The depth of the table of contents. The defaults are taken from the variables org-export-headline-levels and org-export-with-toc.
‘ftoc:’
Does the CSS of the page specify a fixed position for the “toc"? If yes, the toc is displayed as a section.
‘ltoc:’
Should there be short contents (children) in each section? Make this ‘above’ if the section should be above initial text.
‘mouse:’
Headings are highlighted when the mouse is over them. Should be ‘underline’ (default) or a background color like ‘#cccccc’.
‘buttons:’
Should view-toggle buttons be everywhere? When ‘nil’ (the default), only one such button is present.
You can choose default values for these options by customizing the variable org-infojs-options. If you always want to apply the script to your pages, configure the variable org-export-html-use-infojs.