Remark使い方メモ（Markdown でスライドを作るやつ）

[gnab/remark | GitHub][]

[gnab/remark | GitHub]: https://github.com/gnab/remark

Markdown で記述したテキストをスライド形式にして表示してくれるツール。

同種のツールに reveal.js があるが、あちらよりもシンプル。

というか、デフォルトだとスタイルについては基本なにもしない。
スタイルは CSS を使って自力で調整する。

必要なファイルも、特別なフォントを指定しないのであれば、実質 js ファイルのみ。

シンプルなスライドをパパっと作りたい場合は、 Remark がいい気がする。

凝りたい場合は、 CSS 使っていくらでも凝ることができる。

# Hello World
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      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>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create();
    </script>
  </body>
</html>
```

[GitHub の Wiki][] に記載されている HTML をそのままコピペして保存。ブラウザで開く。

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ee7498c4-2297-2514-bbd6-86bf664bcd89.jpeg)

矢印キーの左右でページを移動できる（簡単！）。

[GitHub の Wiki]: https://github.com/gnab/remark/wiki

# Markdown ファイルを分離する
```html:slide.html
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      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>
  </head>
  <body>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      var slideshow = remark.create({
        sourceUrl: 'slide.md'
      });
    </script>
  </body>
</html>
```

```text:slide.md
class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction
```

```text:フォルダ構成
|-slide.html
`-slide.md
```

HTTP サーバーを起動して、 `slide.html` が存在するフォルダを見れるようにする。
ここでは、 `http://localhost/slide.html` で参照できるよう HTTP サーバーを起動して確認。

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/597e3e2c-f4b5-30e8-b219-d43c05687741.jpeg)

```js:slide.html一部抜粋
      var slideshow = remark.create({
        sourceUrl: 'slide.md'
      });
```

`sourceUrl` に読み込む Markdown ファイルのパスを指定することで、外部の Markdown ファイルを読み込んでスライドにすることができる。

ただし、この動作は HTTP リクエスト経由でなければ確認することができない。

# 書き方
## ページ切り替え
```text:
#Page1

---

#Page2
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/25cebb84-4e13-8574-7959-c4c69456c32e.jpeg)

- `---` がページの区切りになる。

## ページに class 属性を設定する
```text:
class: hoge, fuga

#class
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/7fbc0c7a-2af4-60c4-4962-1afffcd04df4.jpeg)

- 各ページの先頭で `class: <class 名>[, ...]` と記述することで、そのページを表す `<div>` タグに、指定した `class` を設定することができる。
- 値はカンマ区切りで複数指定できる。

### 組み込みの class
```text:
class: right, bottom

#right bottom
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/a58ffd07-0ad0-36b9-7aa2-6479929567c7.jpeg)

- 縦方向を指定する class として、 `top`, `middle`, `bottom` が、
- 横方向を指定する class として、 `left`, `center`, `right` が用意されている。
- デフォルトは `class: left, top` を指定した場合と同じになる。

## 背景画像を指定する
```text:
background-image: url(bridge.jpg)

#background image
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/20f9762e-31d3-21e1-b44b-cc67474ddbaf.jpeg)

- ページの先頭で `background-image: url(<画像ファイルのパス>)` と指定することで、そのページの背景画像を指定できる。

## ページ送りするたびに文字を少しずつ表示させる
```text:
#Page1

##hoge

--

##fuga

---

#Page2
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/37d9d77d-062d-cdd2-747a-164e6cb8e5bb.jpeg)

- `--` で区切ることで、少しずつ文字を表示させることができるようになる。

## 連続して複数のページに同じスタイルを適用したり、同じ文字を表示させたりする
```text
layout: true

class: center, top

#Header

---
#Page1

---

#Page2

---
class: right, bottom

#Page3

---
layout: true

#Header2

---
#Page4
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/96b086ef-7706-4fd2-9434-b01ace7b0484.jpeg)

- `layout: true` と指定すると、そのページはレイアウト定義用のページとして認識され、そのページ単体では画面に表示されなくなる。
- 代わりに、そこで指定した `class` や文字が、続くページに全て埋め込まれるようになる。
- `class` は個別のページで上書きすることも可能（`Page3`）。
- `layout: true` を指定したページが途中で現れると、そこで指定された設定が次からのページに埋め込まれるようになる。

## シンタックスハイライトで行を強調する
<pre>
```java
public static void main(String[] args) {
    System.out.println("Hello Remark!!");
}
```

```java
public static void main(String[] args) {
*   System.out.println("Hello Remark!!");
}
```
</pre>

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/27ebe509-5d04-fb09-2aa6-48dcab8b2bef.jpeg)

- コードブロック内で強調させたい行の先頭に `*` を付けることで、その行を強調表示させることができる。

## 任意の class を指定した &lt;span&gt;/&lt;div&gt; タグで括る
```text
.hoge[hoge text]

.fuga[fuga text .piyo[piyo text]]

.fizz[
  fizz text
  .buzz[buzz text]
]
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e90fd897-51aa-045b-23ef-2b0a7007ae7c.jpeg)

- `.<class 名>[<テキスト>]` と記述することで、任意の class を指定した `<span>` タグでテキストを括ることができる。
- `[` と `]` の間に改行があると、 `<div>` タグで括られる。
    - その場合、内部のテキストは先頭にスペースを 4 つ以上入れないようにしなければならない。

### 位置を調整する
```text
.center[center text]

.right[right text]

.center[
  center text
  .left[left text]
]
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/5779b5f1-bd10-7d31-881d-8f3dc55a658c.jpeg)

- `center`, `left`, `right` を指定することで、組み込みの位置調整を利用できる。
- 画像も、この方法で位置を調整できる（`.center[![image](img/test.jpg)]`）。

## 別のページを埋め込む
```text
name: base-page

#Page1

---
template: base-page

#Page2
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6a45004c-5f2b-e572-6b31-4014749339ef.jpeg)

- `name` でそのページの名前を定義し、 `template` で名前を指定して別のページを埋め込むことができる。

## 縦横比を変更する
```html
    <script type="text/javascript">
      var slideshow = remark.create({
        sourceUrl: 'slide.md',
        ratio: '16:9'
      });
    </script>
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/1b0d16e1-ae58-e4ce-053e-41b1be998d27.jpeg)

- `remark.create()` の引数で渡すオブジェクトに、 `raito` プロパティを指定する。
- デフォルトは `4:3`。

# 他
## コードブロックが長いときにはみ出ないようにする
### 標準
<pre>
```text
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
```
</pre>

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/7ad2509d-c1c1-5cc4-9083-081600b90e4d.jpeg)

### 修正
```html
    <style type="text/css">
    .remark-code-line {
        word-wrap: break-word;
    }
    </style>
```

![remark.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/62192173-0654-fa9b-16b4-fae1f1d3e2d9.jpeg)

- `.remark-code-line` クラスに対して、 `word-wrap: break-word` を指定すると、コードの記述がはみ出るのを回避できる。