remark介绍

name: inverse
layout: true
class: center, middle, inverse
---
#remark
####markdown制作幻灯片之利器
[tandaly 翻译-2014]
[英文原文](http://remarkjs.com)
.footnote[直接访问作者 [Github项目](https://github.com/gnab/remark)]
---
## 它是什么，为什么我要使用它？
---
layout: false
.left-column[
  ## 它是什么?
]
.right-column[
  它是一个简单的，用于浏览的，markdown制作幻灯片工具，它提供给使用HTML和CSS的人们，特征：

- Markdown 格式，智能扩展

- 演示模式, 用于演示幻灯片

- 语法高亮, 支持多重语言

- 幻灯片缩放,  因此，对所有设备的外观都相似 .red[*]

- 支持只能手持和移动设备，即滑动浏览幻灯片

.footnote[.red[*] 尽可能达到浏览器最优模式]
]
---
.left-column[
  ## 它是什么?
  ## 为什么要使用它?
]
.right-column[
幻灯片的制作流程，包含如下步骤：

- 只写你的想法

- 做一些基本的样式化处理

- 更容易与他人合作

- 可以分享给大家

那就用remark尽可能的为你制作优美的.red[*] 幻灯片!

.footnote[.red[*] 你可能想将现有的幻灯片做得更好]
]
---
.left-column[
  ## 它是什么?
  ## 为什么要使用它?
]
.right-column[
幻灯片是用markdown语法来表达，你可以：

- 重点是关注内容，表达自己所想表达的，而不用担心外观

实际上幻灯片是一个HTML文档，你可以:

- 显示在任何像样的浏览器

- 使用CSS样式规则，就想任何其他的HTML内容一样

- 可以脱机使用!

在幻灯片中包含一个存文本文件，你可以:

- 你可以存储在任何地方，比如你得电脑上，托管到Dropbox服务器上，托管在Github Pages上...

- 更容易与他人协作编写，你可以用git或者Mercuial项目文件版本控制器来进行文件管理。
]
---
template: inverse

## 这是怎么做的呢?
---
name: how

.left-column[
  ## 它是如何工作的呢?
### - Markdown
]
.right-column[
A Markdown-formatted chunk of text is transformed into individual slides by JavaScript running in the browser:

```remark
# Slide 1
This is slide 1

---

# Slide 2
This is slide 2
```

.slides[
  .first[
  ### Slide 1
  This is slide 1
  ]
  .second[
  ### Slide 2
  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](http://daringfireball.net/projects/markdown/) if you're not familiar with Markdown formatting.
]
---
.left-column[
  ## 它是如何工作的呢?
  ### - Markdown
  ### - 嵌入 HTML
]
.right-column[
A simple HTML document is needed for hosting the styles, Markdown and the generated slides themselves:

```xml
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      /* Slideshow styles */
    </style>
  </head>
  <body>
*    <textarea id="source">
      
    </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](http://remarkjs.com/downloads/remark-latest.min.js) online directly.
]
---
template: inverse

## 当然，它目前仅仅支持Markdown.
---
.left-column[
  ## Markdown 扩展
]
.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[
  ## Markdown extensions
  ### - Slide properties
]
.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 `name` and `class`

* Using slides as templates using properties `template` and `layout`

* Expansion of `{{ property }}` expressions to property values

See the [complete list](https://github.com/gnab/remark/wiki/Slide-Properties) of slide properties.
]
---
.left-column[
  ## Markdown extensions
  ### - Slide properties
  ### - Content classes
]
.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:

```xml
<span class="footnote">
  <span class="red bold">*</span> Important footnote
</span>
```
]
---
.left-column[
  ## Markdown extensions
  ### - Slide properties
  ### - Content classes
  ### - Syntax Highlighting
]
.right-column[
Code blocks can be syntax highlighted by specifying a language from the set of [supported languages](https://github.com/gnab/remark/wiki/Configuration-Options#wiki-highlighting).

Using [GFM](http://github.github.com/github-flavored-markdown/) fenced code blocks you can easily specify highlighting language:

.pull-left[

<pre><code>```javascript
function add(a, b)
  return a + b
end
```</code></pre>
]
.pull-right[

<pre><code>```ruby
def add(a, b)
  a + b
end
```</code></pre>
]

A number of highlighting [styles](https://github.com/gnab/remark/wiki/Configuration-Options#wiki-highlighting) are available, including several well-known themes from different editors and IDEs.

]
---
.left-column[
  ## Presenter mode
]
.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[
  ## Presenter mode
  ### - Inline notes
]
.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 notes
```

Slide 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[
  ## Presenter mode
  ### - Inline notes
  ### - Cloned view
]
.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[
从入门到掌握只需要几步就可完成:

1. 浏览 [项目](http://github.com/gnab/remark)

2. 这只是入门教程

想要获取更多remark信息，请检出[wiki](https://github.com/gnab/remark/wiki) 页面.
]
---
name: last-page
template: inverse

##  激动吧，翻滚吧 (现在)!

那就赶快使用[remark](http://github.com/gnab/remark)创建幻灯片吧.