Markdown

Markdown is a plain text formatting syntax that easily lets you write next to plain text with special formatting to signalize textual elements like headings, bullet lists, links and so on.

Have a look at the Markdown website if you're not familiar with Markdown formatting.

Slide Separators

A line containing three dashes, represents a slide separator (not a horizontal rule, <hr />, like in regular Markdown). Thus, a simple Markdown text like the one below represents a slideshow with two slides:

# Slide 1
This is slide 1
---
# Slide 2
This is slide 2

Incremental Slides

To avoid having to duplicate content if a slide is going to add to the previous one, using only two dashes to separate slides will make a slide inherit the content of the previous one:

# Slide

- bullet 1
--

- bullet 2

The above text expands into the following:

# Slide

- bullet 1
---

# Slide

- bullet 1
- bullet 2

Empty lines before and after the two dashes are of significance as the preceding newline character is omitted to enable adding to the last line of the previous slide. Thus, as the extra bullet point in the above example needs to go on a separate line, an extra line is added after the two dashes to force a newline. Without the extra line, the resulting text would have been - bullet 1- bullet 2.

By default, incremental slides are counted just like ordinary slides. By using the count slide property or countIncrementalSlides configuration option, excluding either single slides or all incremental slides from the slide count is possible.

Slide Notes

A line containing three question marks represents a separator of content and note of the slide:

# Slide

Some content.

???
Some note.

A notes open version of a slide show can be shared by sharing the url with #p1 appended. Such as remarkjs.com/#p1.

With Incremental Slides the notes go after each increment

Hello
???
notes for hello
--
World
???
notes for world

Comments

If you want to leave a comment in your markdown, but not render it in the Slide Notes, you can use either of the two following methods. The HTML style comment will be available in the page's source in the browser, while the empty link will not be.

HTML

<!--
I'm a comment.
-->

Empty Link

[//]: # (I'm a comment)

Slide Properties

Initial lines of a slide on a key-value format will be extracted as slide properties.

name

The name property accepts a name used to identify the current slide:

name: agenda

# Agenda

A slide name may be used to:

• Link to a slide using URL fragment, i.e. slideshow.html#agenda, or in Markdown; [the agenda](#agenda)

• Navigate to a slide using the API, i.e. slideshow.gotoSlide('agenda')

• Identify slide DOM element, either for scripting or styling purposes:

  <div class="remark-slide-container">
    <div class="remark-slide-scaler">
      <div class="remark-slide">
        <div id="slide-agenda" class="remark-slide-content">
          <h1>Agenda</h1>

• Reference slide when using the template slide property.

class

The class property accepts a comma-separated list of class names, which are applied to the current slide:

class: center, middle

# Slide with content centered in both dimensions

Resulting HTML extract:

<div class="remark-slideshow">
  <div class="remark-slide">
    <div class="remark-slide-content center middle">
      <h1>Slide with content centered in both dimensions</h1>

Built-in slide classes include left, center, right, top, middle and bottom, which may be used to align entire slides.

background-image

The background-image property maps directly to the background-image CSS property, which are applied to the current slide:

background-image: url(image.jpg)

# Slide with background image

Other slide background CSS properties defined in the default remark styles:

background-position: center;
background-repeat: no-repeat;
background-size: contain;      /* applied using JavaScript only if background-image is larger than slide */

count

The count property allows for specific slides not to be included in the slide count, which is by default displayed in the lower right corner of the slideshow:

count: false

This slide will not be counted.

When the countIncrementalSlides configuration option is enabled, all incremental slides will automatically have the count: false slide property set.

template

The template property names another slide to be used as a template for the current slide:

name: other-slide

Some content.

---
template: other-slide

Content appended to other-slide's content.

The final content of the current slide will then be this:

Some content.

Content appended to other-slide's content.

Both template slide content and properties are prepended to the current slide, with the following exceptions:

• name and layout properties are not inherited
• class properties are merged, preserving class order

The template property may be used to (apparently) add content to a slide incrementally, like bullet lists appearing a bullet at a time.

Using only two dashes (--) to separate slides implicitly uses the preceding slide as a template:

# Agenda

--
1. Introduction

--
2. Markdown formatting

Template slides may also contain a special {{content}} expression to explicitly position the content of derived slides, instead of having it implicitly appended.

layout

The layout property either makes the current slide a layout slide, which is omitted from the slideshow and serves as the default template used for all subsequent slides:

layout: true

# Section

---

## Sub section 1

---

## Sub section 2

Or, when set to false, reverts to using no default template.

Multiple layout slides may be defined throughout the slideshow to define a common template for a series of slides.

exclude

The exclude property, when set to true, hides a slide. It is a way to filter that slide out so that it is not used at all in rendering.

Content Classes

Any occurrences of one or more dotted CSS class names followed by square brackets are replaced with the contents of the brackets with the specified classes, as <span> tags, applied:

.footnote[.red.bold[*] Important footnote]

Resulting HTML extract:

<span class="footnote">
  <span class="red bold">*</span> Important footnote
</span>

Content classes available include left, center and right, which may be used to align text blocks.

If you wish to have <div> tags instead, separate your content on new lines a follows:

.footnote[.red.bold[*]
Important footnote]

.footnote[
.red.bold[
*]Important footnote]

Resulting HTML:

<div class="footnote">
  <span class="red bold">*</span>
  Important footnote
</div>

<div class="footnote">
  <div class="red bold">*</div>
  Important footnote
</div>

In case of nested brackets, you can use HTML codes:

.footnote[.red.bold[*] Opening bracket: []

Resulting HTML extract:

<span class="footnote">
  <span class="red bold">*</span> Opening bracket: [
</span>

Syntax Highlighting

Github Flavored Markdown (GFM) fenced code blocks are the preferred way of creating code blocks, easily letting you specify the highlighting language:

Code:

```ruby
def add(a,b)
  a + b
end
```

A default highlighting language may be configured using the highlightLanguage configuration option. Specifying a language on a code block will override the default.

Line Highlighting

With the highlightLines configuration option enabled, lines prefixed with * will get highlighted with a yellow background, which can be handy for bringing attention to specific parts of code snippets, i.e.:

Implicit return statement:

```ruby
def add(a,b)
*  a + b
end

# Notice how there is no return statement.
```

This functionality is disabled by default.