A single-file html presentation has been a welcome feature, Feature request: Export to single HTML · Issue #788. And org-reveal offers a convenient single-file option, but with Issues. Fortunately, there is a package called inliner converting a html file with everything inlined.
Convert the html to a single-file with inliner
Turns your web page to a single HTML file with everything inlined.
What it does:
- Strips white from CSS
- Base64 encode images and videos
- Puts everything back together as a single HTML file with a simplfied doctype
This method is applicable to any html file posthumous (not on-the-fly with org-reveal’s single-file option). So you have the liberty to use whatever method needed to achieve the desirable effects for presentation.
The following steps are for org-reveal export.
generate a single-file html file with the following in Emacs org file.
- remove the file:// hard links, if any, in the script from the exported html file.
Install the inliner utility via npm:
123$ npm install -g inlinerinliner --help
convert the html file generated in step 1 to PDF with liner without compression using -n option.
NOTES: --nocompress is crucial, also c true when using Markdown (https://github.com/hakimel/reveal.js/issues/788).
12inliner -n liver-slice-talk-2019.html >inliner.html
Other resources and notes
- ☐ Inliner with markdown conversion: hkdobrev/service-providers-slides: Slides for service providers presentation, more discussion Feature request: Export to single HTML · Issue #788 · hakimel/reveal.js.
- ☐ Another tool: html-inline – npm.
- ☐ convert html slides to PDF: GitHub – astefanutti/decktape: PDF exporter for HTML presentations issues: 774970 – Headless Print to PDF – entire image clipped when it overflows page – chromium
- ☐ PDF-export: PDF Export | reveal.js WORKS fine with normal reveal.js export with Chromium, NOT with the single-file version. Zoom out with Ctl+-, if needed, after appending ?print-pdf at the end of the url.
- ☐ Image embedding with base64: org mode – Embed Image as Base64 on HTML export from Orgmode – Emacs Stack Exchange.
If you want Emacs org-mode export html (not just org-reveal) with inline images, use code from org-mode html export with inline images.
123456789101112131415(defun org-html-export-to-mhtml (async subtree visible body)(cl-letf (((symbol-function 'org-html--format-image) 'format-image-inline))(org-html-export-to-html nil subtree visible body)))(defun format-image-inline (source attributes info)(let* ((ext (file-name-extension source))(prefix (if (string= "svg" ext) "data:image/svg+xml;base64," "data:;base64,"))(data (with-temp-buffer (url-insert-file-contents source) (buffer-string)))(data-url (concat prefix (base64-encode-string data)))(attributes (org-combine-plists `(:src ,data-url) attributes)))(org-html-close-tag "img" (org-html--make-attribute-string attributes) info)))(org-export-define-derived-backend 'html-inline-images 'html:menu-entry '(?h "Export to HTML" ((?m "As MHTML file and open" org-html-export-to-mhtml))))