Slides as Code
  1. Code your Presentation Slides
  2. /
  3. Usage
  4. /
  5. Markdown
Edit this page

Markdown

Introduction

Slides as Code is a Hugo theme that uses Markdown and Shortcodes to implement slides content. Slides as Code doesn’t use Hugo’s Markdown renderer, but Reveal.js Markdown renderer called marked.

Thereby, Slides As Code is supporting GitHub Flavored Markdown, see Guide and Reference for further information.

On top of marked, Reveal.js implements:

  • a special syntax using HTML comments to add attributes to Markdown element and slide.
  • speaker notes delimiter Note:

Element Attributes

Add attributes to the Markdown element by placing the HTML comment next to the element.

Example

- Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->

Slide Attributes

Add attributes to the slide element by placing the HTML comment on top of the slide content. Most of slides attributes could be set by using slide shortcode (see Shortcode page).

Example

<!-- .slide: data-background="#ff0000" -->
Slide content

Tips & Tricks