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 theMarkdown website if you're not familiar with Markdown formatting.

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 1This is slide 1---# Slide 2This is slide 2

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 thecount slide property orcountIncrementalSlides configuration option, excluding either single slides or all incremental slides from the slide count is possible.

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

#SlideSome 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

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.

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

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

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

Thename 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 theAPI, i.e.slideshow.gotoSlide('agenda')

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

  <divclass="remark-slide-container"><divclass="remark-slide-scaler"><divclass="remark-slide"><divid="slide-agenda"class="remark-slide-content"><h1>Agenda</h1>

• Reference slide when using thetemplate slide property.

Theclass 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:

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

Built-in slide classes includeleft,center,right,top,middle andbottom, which may be used toalign entire slides.

Thebackground-image property maps directly to thebackground-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 defaultremark styles:

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

Thecount 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: falseThis slide will not be counted.

When thecountIncrementalSlides configuration option is enabled, allincremental slides will automatically have thecount: false slide property set.

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

name: other-slideSome content.---template: other-slideContent 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 andlayout properties are not inherited
• class properties are merged, preserving class order

Thetemplate 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.

Thelayout 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.

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

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>  <span>*</span> Important footnote</span>

Content classes available includeleft,center andright, which may be used toalign 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>  <span>*</span>  Important footnote</div><div>  <div>*</div>  Important footnote</div>

In case of nested brackets, you can useHTML codes:

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

Resulting HTML extract:

<span>  <span>*</span> Opening bracket: [</span>

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

Code:```rubydef add(a,b)  a + bend```

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

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

Implicit return statement:```rubydef add(a,b)*  a + bend# Notice how there is no return statement.```

This functionality is disabled by default.