Skip to content
/ reveal-pug-talk Public template

Template for RevealJS talk slides using Pug, KaTeX, Stylus, CoffeeScript, SVG Tiler, SVG.js

Notifications You must be signed in to change notification settings

edemaine/reveal-pug-talk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Technology: reveal.js + KaTeX + Pug + Stylus + CoffeeScript + [SVG Tiler] + [SVG.js]

This repository uses the reveal-pug-talk template to make slides by combining the following technology (all free and open source):

  • reveal.js: a flexible HTML presentation framework, extendable by plugins and themes. Here we use:
    • Chalkboard: enables live drawing annotation on the slides (using pen or touch or mouse)
    • Merriweather font
    • KaTeX: a library for translating LaTeX math into HTML
  • Pug: a concise indentation-based notation for HTML, which makes it easier to express reveal.js slides, and to mix together other languages, such as the following
  • Stylus: a concise indentation-based notation for CSS (styling of HTML)
  • CoffeeScript: an indentation-based language that compiles to JavaScript
  • SVG Tiler: a library for converting ASCII art in slides into high-quality SVG graphics
  • SVG.js: a library that makes it easy to add animations to SVG drawings (including those made by SVG Tiler)
  • Gulp: a tool that builds the Pug code into HTML

Structure

Here's an overview of the individual files and what they do:

  • gulpfile.coffee: Definitions of build and watch rules that run Pug on index.pug and compile other .coffee files to .js.
  • index.pug: Top-level Pug file that calls all other files. Defines the top-level structure of the document, but has no slides.
  • slides.pug: Slides and specific animations are defined here.
  • index.styl: Custom reveal.js styling, and specific styling for the slides.

Build Instructions

To build the slides HTML (index.html) from the source files:

  1. Install NodeJS if you haven't already.

  2. Clone the repository

  3. Run the following:

    npm install
    npm run build

If you're live-editing source files and want index.html to continually build and update, use the following command:

npm run watch

To assemble just the needed files into a dist directory (as defined by deploySet in gulpfile.coffee), use the following command:

npm run dist

To deploy these files to GitHub Pages, use the following command:

npm run deploy

About

Template for RevealJS talk slides using Pug, KaTeX, Stylus, CoffeeScript, SVG Tiler, SVG.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published