Creating a revealjs presentation in Jekyll.

@kbrock

Jekyll

  • highlights code [keep]
  • leverages sass [keep]
  • converts markdown to html [keep]
  • merges content into a boilerplate (e.g.: reveal.html)

reveal.js

  • slide boundaries (right arrow)
  • sub slide boundary (down arrow)
  • code highlighting (remove)
  • themes

Markdown uses --- to produce an <hr>. Put these to mark the next slide:

<section>
{ { content | replace: "<hr />", "</section><section>" }}
</section>

add 2 custom tags to change navigation: ++, --:

<section>
{ { content |
    replace: "<hr />", "</section><section>" |
    replace: "<p>++</p>", "<section>" |
    replace: "<p>–</p>", "</section>" }}
</section>

Note: that is &emdash not --.

remove code highlighting

  • Just remove the javascript file and styles

Themes files

  • css/theme/default.scss
  • _sass/theme/_mixins.css
  • _sass/theme/template/{_settings.scss,_theme.scss}

Theme changes

  • make @imports non relative.
  • include reference to syntax-highlighting
  • add frontmatter to default.scss
  • remove extra theme support in boilerplace.

Theme decisions

  • outstanding: Want to just site wide theme

post declares boilerplate in frontmatter:

---
layout: reveal
---

Use this presentation for an example.

The most work was fixing the css. (still outstanding)