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.