-
Notifications
You must be signed in to change notification settings - Fork 856
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.
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
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.
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
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.
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.
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.
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 */
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.
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
andlayout
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.
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.
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.
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: &#91;]
Resulting HTML extract:
<span class="footnote">
<span class="red bold">*</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: ```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.
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.
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
Code:
def add(a,b)
a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>