#Gist => Deck .footnote[powered by remark.js]
layout: false .left-column[
] .right-column[ A simple, in-browser, Markdown-driven slideshow tool
- Markdown formatting, with smart extensions
- Presenter mode, with cloned slideshow view
- Syntax highlighting, supporting a range of languages
- Slide scaling, thus similar appearance on all devices / resolutions .red[*]
- Touch support for smart phones and pads, i.e. swipe to navigate slides .footnote[.red[*] At least browsers try their best] ]
.left-column[
] .right-column[ gistdeck let you host your remark source code in gist, and instantantly render in to remark slide, which means:
- you don't have to find place to host your slides
- you got version control of your slide source
- you can even analytics your slide by using ga-beacon like
]
.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! .footnote[.red[] You probably want to convert existing slideshows as well] ]
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>
<style type="text/css">
/* Slideshow styles */
</style>
</head>
<body>
* <textarea id="source">
<!-- Slideshow Markdown -->
</textarea>
* <script type="text/javascript" src="remark.js">
</script>
<script type="text/javascript">
* var slideshow = remark.create();
</script>
</body>
</html>You may download remark 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, supporting a range of languages ]
.left-column[
] .right-column[ Initial lines containing key-value pairs are extracted as slide properties:
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 See the complete list of slide properties. ]
.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:
.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 can be syntax highlighted by specifying a language from the set of supported languages. Using GFM fenced code blocks you can easily specify highlighting language
A number of highlighting styles are available, including several well-known themes from different editors and IDEs. .pull-left[
```javascript
function add(a, b){
return a + b
}
```] .pull-right[
``````ruby
def add(a, b)
a + b
end
```.left-column[
] .right-column[ To help out with giving presentations, a presenter mode comprising the following features is provided:
- Display of slide notes for the current slide, to help you remember key points
- Display of upcoming slide, to let you know what's coming
- Cloning of slideshow for viewing on extended display ]
.left-column[
] .right-column[ Just like three dashes separate slides, three question marks separate slide content from slide notes:
Slide 1 content
*???
Slide 1 notes
---
Slide 2 content
*???
Slide 2 notesSlide notes are also treated as Markdown, and will be converted in the same manner slide content is. Pressing P will toggle presenter mode. ] ??? Congratulations, you just toggled presenter mode! Now press P to toggle it back off.
.left-column[
] .right-column[ Presenter mode of course makes no sense to the audience. Creating a cloned view of your slideshow lets you:
- Move the cloned view to the extended display visible to the audience
- Put the original slideshow in presenter mode
- Navigate as usual, and the cloned view will automatically keep up with the original Pressing C will open a cloned view of the current slideshow in a new browser window. ]
template: inverse
.left-column[
] .right-column[ Getting up and running is done in only a few steps:
- Go to your gist and write some markdown.
- put a "deck" right after "gist" in url like this:
deck
v
https://gist.github.com/jcouyang/8acfc555a718d62b77b2
|
V
https://gistdeck.github.com/jcouyang/8acfc555a718d62b77b2
- enjoy the slide remark generated. For more information on using remark, please check out the wiki pages. ]
name: last-page template: inverse