hexo-generator-slidehtml

A hexo plugin to generate slide html when build / generating hexo project.

Slides are rendered with reveal.js 4.x. If you are coming from an older release of this plugin, note that the generated page no longer loads reveal 3.4.1 from a CDN — see revealBase under Config.

Usage

Normally hexo would generate index.html in folder. This will generate a slide.html in same folder for you. Simply visit https://[yousite]/path/to/your/article/slide.html to quickly have a presentation.

If you have a article with a simple post settup.

---
title: Hello World
slidehtml: true
---

this will generate a slide page for it.

Demo

Because hexo would update posts link everytime after edit it.
So plz everyone intertesting in demo, just reference this project's site, every post in it have different setup.
You can find the post's source in branch gh-pages-build. 
And each post add a tail url or /slide.html can check its slide.

Website

Config

slidehtml: 
  // Merge title as first slide page.
  titleMerge: true
  // For reveal.js's page separator, remember escape special character like '\' .
  horizontalSeparator: '^\\n---\\n'
  verticalSeparator: '^\\n--\\n'
  // none/fade/slide/convex/concave/zoom default is none.
  slideTransition: none
  // Where reveal.js 4.x is served from. Default is the jsDelivr CDN.
  revealBase: 'https://cdn.jsdelivr.net/npm/[email protected]'
  // Any theme shipped in reveal.js's dist/theme/, without the .css.
  revealTheme: black

Serving reveal.js yourself

The default revealBase is a CDN, which is one conference wifi away from a blank screen. To vendor it instead, copy the files the template loads into your site's source/ and point revealBase at the result:

source/vendor/reveal/
├── dist/reset.css
├── dist/reveal.css
├── dist/reveal.js
├── dist/theme/<your theme>.css
├── dist/theme/fonts/…        # whatever that theme's css references
├── plugin/highlight/highlight.js
├── plugin/highlight/zenburn.css
├── plugin/markdown/markdown.js
├── plugin/notes/notes.js
└── plugin/math/math.js       # only if you use latex: true

slidehtml:
  revealBase: /vendor/reveal

A site-root-absolute path is the safe choice — slide.html sits at whatever depth your permalink puts it, so a relative base would have to change per post.

Installation

npm i hexo-generator-slidehtml

Post Attribute

These attribute in post can override plugin's global setup.

---
slidehtml:
  titleMerge: true
  horizontalSeparator: ''
  verticalSeparator: ''
  slideTransition: none
---

Be advice that: plugin Config using YAML as format. so it's need escape char() for special char.
But post setup is Markdown format, so escape char() only focus on markdown itself.

LaTeX

latex is an optional attribute, only set it true will enable it.

---
slidehtml:
  latex: true
---

License

MIT