title: remark description: Introduce remark. name: inverse layout: true class: center, middle, inverse
layout: false .left-column[
] .right-column[ A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
-
Markdown formatting, with smart extensions
-
Automatic syntax highlighting, with optional language hinting
-
Slide scaling, thus similar appearance on all devices / resolutions .red[*]
-
Touch support for smart phones and pads, i.e. swipe to navigate slides
.left-column[
] .right-column[ If your ideal slideshow creation workflow contains any of the following steps:
-
Just write what's on your mind
-
Do some basic styling
-
Easily collaborate with others
-
Share with and show to everyone
Then remark might be perfect for your next.red[*] slideshow!
.left-column[
] .right-column[ As the slideshow is expressed using Markdown, you may:
- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where
As the slideshow is actually an HTML document, you may:
-
Display it in any decent browser
-
Style it using regular CSS, just like any other HTML content
-
Use it offline!
As the slideshow is contained in a plain file, you may:
-
Store it wherever you like; on your computer, hosted from your Dropbox, hosted on Github Pages alongside the stuff you're presenting...
-
Easily collaborate with others, keeping track of changes using your favourite SCM tool, like Git or Mercurial ]
template: inverse
name: how
.left-column[
] .right-column[ A Markdown-formatted chunk of text is transformed into individual slides by JavaScript running in the browser:
# Slide 1
This is slide 1
---
# Slide 2
This is slide 2
.slides[ .first[
This is slide 1 ] .second[
This is slide 2 ] ]
Regular Markdown rules apply with only a single exception:
- A line containing three dashes constitutes a new slide
(not a horizontal rule,
<hr />)
Have a look at the Markdown website if you're not familiar with Markdown formatting. ]
.left-column[
] .right-column[ A simple HTML document is needed for hosting the styles, Markdown and the generated slides themselves:
<!DOCTYPE html>
<html>
<head>
<script src="remark.js" type="text/javascript"></script>
<style type="text/css">
/* Slideshow styles */
</style>
</head>
<body>
<textarea id="source">
<!-- Slideshow Markdown -->
</textarea>
<div id="slideshow"><div>
</body>
</html>
You may download .no-highlight remark.js to have your slideshow not depend on any online resources, or reference the latest version online directly.
]
template: inverse
.left-column[
] .right-column[ To help out with slide layout and formatting, a few Markdown extensions have been included:
-
Slide properties, for naming, styling and templating slides
-
Content classes, for styling specific content
-
Syntax highlighting, with language hinting ]
.left-column[
] .right-column[ Initial lines containing key-value pairs are extracted as slide properties:
.remark
name: agenda
class: middle, center
# Agenda
The name of this slide is {{ name }}.
Slide properties serve multiple purposes:
-
Naming and styling slides using properties
nameandclass -
Using slides as templates using properties
templateandlayout -
Expansion of
{{ property }}expressions to property values ]
.left-column[
] .right-column[ Any occurences of one or more dotted CSS class names followed by square brackets are replaced with the contents of the brackets with the specified classes applied:
.remark
\.footnote[.red.bold[*] Important footnote]
Resulting HTML extract:
<span class="footnote">
<span class="red bold">*</span> Important footnote
</span>
.left-column[
] .right-column[ Code blocks are automatically syntax highlighted, based on the number of recognized keywords from a set of supported languages.
Both indented code blocks and GFM fenced code blocks are supported, optionally overriding the automatically detected language:
.pull-left[
.no-highlight
Code:
.ruby
def add(a, b)
a + b
end
] .pull-right[
.no-highlight
Code:
```ruby
def add(a, b)
a + b
end
```
]
Inline code is not automatically highlighted, and must be supplied a language to be highlighted:
.remark
Inline code: `.ruby a = 5`
.left-column[
] .right-column[ A number of highlighting styles are available, including several well-known themes from different editors and IDEs.
You may specify a style other than the default style using the configuration option highlightStyle, like this:
<script src="remark.js" language="text/javascript">
{ "highlightStyle": "sunburst" }
</script>
If you're using some custom style, you might want to prevent any of the bundled styles from being included. This can be done by specifying .javascript null as the style:
.javascript
{ "highlightStyle": null }
.left-column[
]
.right-column[
The name property accepts a name used to identify the current slide:
.remark
name: agenda
# Agenda
A slide name may be used to:
-
Link a slide directly using URL fragment, i.e.
slideshow.html#agenda -
Navigate to a slide using the API, i.e.
remark.gotoSlide('agenda') -
Identify slide DOM element, either for scripting or styling purposes:
<div id="slideshow"> <div class="slide"> <div id="slide-agenda" class="content"> <h1>Agenda</h1> -
Reference slide when used as template for some other slide ]
.left-column[
]
.right-column[
The class property accepts a comma-separated list of class names, which are applied to the current slide:
.remark
class: center, middle
# Slide with content centered in both dimensions
Resulting HTML extract:
<div id="slideshow">
<div class="slide">
<div class="content center middle">
<h1>Slide with content centered in both dimensions</h1>
name: template .left-column[
]
.right-column[
The template property names another slide to be used as a template for the current slide:
.remark
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:
.remark
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:
nameandlayoutproperties are not inheritedclassproperties are merged, preserving class order ]
name: template .left-column[
]
.right-column[
The template property may be used to (apparantly) 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:
.remark
# 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.
]
.left-column[
]
.right-column[
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:
.remark
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. ]
template: inverse
.left-column[
] .right-column[ Getting up and running is done in only a few steps:
-
Visit the project site
-
Follow the steps in the Usage section
name: last-page template: inverse
Slideshow created using remark.