An attempt to replicate the OU's branded template (an EECS one) in reveal.js. So far the logo on the top left and the college or department name on the bottom left are implemented.
Why reveal.js? So far it seems to be the most mature and still being maintained. With reveal.js you can also
- Write your content using Markdown or HTML/CSS.
- Have code with syntax highlighting for free.
Install the dependencies.
npm installYou will also need jq and pandoc if you want to use the BiBTeX citation.
Start the development server.
npm run bib
npm run startLight Background
In Markdown, add
<!-- .slide: data-ou-bg-type="light" -->For HTML, just add that data-ou-bg-type="light" to the <section> tag.
References with BibTex
Put your BibTex entries in ref.bib file. To cite the entry,
[@name](#/references)The (#/references) has to be there since the renderer is hooked into a link token of marked.js.
If you want to manually refresh the ref entry, you can run
npm run bibThe file ref.html and ref.json are used, so please check them into the VSC. The ref.html is used
to diplay under the reference section (via an iframe tag). The ref.json is used to determine the correct value
of in-line citation.
To use a different style, get the CSL style sheet from https://github.com/citation-style-language/styles, then, for now, you will have to modify the command
in gulpfile.js.
Since the conversion is done via pandoc, you can use any format that pandoc supports
Font
If you want to have same font as the tempalte, follow the instructions at https://www.ohio.edu/ucm/ohio-brand/typography.
The source file is at css/theme/source/ou.scss. You can then re-build the theme with
npm run build -- css-themes- The numbering of the citation is not as it appear on the slide.
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com.
The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.
Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.
Hakim's open source work is supported by GitHub sponsors. Special thanks to:
- 🚀 Install reveal.js
- 👀 View the demo presentation
- 📖 Read the documentation
- 🖌 Try the visual editor for reveal.js at Slides.com
- 🎬 Watch the reveal.js video course (paid)