7.2 Remark Markdown Basics

Remark.js uses its own flavor of Markdown, which is different from Pandoc’s Markdown! It is limited but should be sufficient for most use cases.

Features that are provided in Pandoc but missing in remark.js’s Markdown:

• fancy lists (ordered lists with letters, e.g., a., b., c., etc.)

7.2.1 Create a New Slide

• Every new slide is created under three dashes (---).

• Two dashes (--) create a new fragment (incremental reveal) within the same slide.

  • Blank lines before and after the two and three dashes are required.
  • No whitespace after the dashes.

• The content of the slide can be arbitrary, e.g., it does not have to have a slide title, and if it does, the title can be of any level you prefer (#, ##, or ###).

---

7.2.2 Slide Properties

• A slide can have a few properties, including class and background-image, etc.

  Properties are written in the beginning of a slide, e.g.,

  ---
  
  class: center, inverse
  background-image: url("images/cool.png")
  
  # A new slide
  
  Content.

• The class property assigns class names to the HTML tag of the slide, so that you can use CSS to style specific slides.

  This will apply class to the whole slide.

  class: center, middle
  
  # Slide with content centered in both dimensions

  will be rendered as:

  <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 classes include: left, center, right, top, middle and bottom, which may be used to align entire slides.

• background-image: Sets a background image for the slide.

• name: Assigns a unique name to a slide, allowing for direct linking or referencing within the presentation (e.g., slides.html#my-slide-name).

---

7.2.3 Add Attributes

Follow remark syntax to add attributes to elements.

Inline Attributes:

.class[text to be styled]

will be rendered as:

<span class="class">text to be styled</span>

Nested inline attributes:

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

will be rendered as:

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

Block Attributes:

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

.class[
# Slide Title
Content of the slide.
]

will be rendered as:

<div class="class">
  <h1>Slide Title</h1>
  <p>Content of the slide.</p>
</div>

Another example:

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

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

will be rendered as:

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

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

remark GitHub Wiki: Content Classes

---