ドキュメント，テキスト化への旅 vol.1 スライド

今のプロジェクトで、ドキュメントは、asciidoc + plantuml や、その他便利ツールで、テキストを git 管理しながら、この感じいいねーと思っている。スライド(プレゼンテーション)もテキストで行こうと決めたときの記録（メモ）。
~~MS Office なんて絶対に使わない。~~

## 試したツール達

1. [jxnblk/mdx-deck](https://github.com/jxnblk/mdx-deck)
    - なんか、説明できないんだけど、いい感じw
    - MDX で書く、React ベースなやつ。
1. [hakimel/reveal.js](https://github.com/hakimel/reveal.js/)
    - star が、40,000 以上も付いた、泣く子も黙るやつ。
    - 多機能。
1. [FormidableLabs/spectacle](https://github.com/FormidableLabs/spectacle)
    - こちらも、star が、7,000 以上もある、React ベースのいい感じなやつ。
    - プログレスバー？のパックマンがかわいい。
1. [yhatt/marp](https://github.com/yhatt/marp)
    - こちらも、star が、7,000 以上もある、デスクトップアプリケーション。
    - なかなか良いのだが、デスクトップアプリは求めていないことに気がついた。

## 今の所一番候補な mdx-deck

### MDX って？

- https://mdxjs.com/

> **コンポーネント時代のマークダウン**
> MDXはMarkdownドキュメントでJSXをシームレスに使用できる形式です。インタラクティブなチャートやノーティフィケーションなどのコンポーネントをインポートしたり、メタデータをエクスポートすることができます。これにより、長い形式のコンテンツをコンポーネントで爆発的に書くことができます。

らしい。

### 試す

```shell
git clone https://github.com/jxnblk/mdx-deck.git
cd mdx-deck
npm install
npm start
```

- http://127.0.0.1:8080 がブラウザで自動で立ち上がった。
- Space キーや、矢印キーの左右で、スライドが遷移する。
- http://127.0.0.1:8080 をもうひとつ開いて、片方で Option(Alt) + P で、プレゼンテーションモード。ページは連動する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/3ee66eeb-6e25-2951-c628-92315a64cb68.png)

- Option + O で、なんかよく見る感じのレイアウトに。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/0a87d3ba-2a7f-0831-7105-4bb97016ca55.png)

- Option + G で、グリッド表示に。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/b12c30cf-cd61-476c-5d61-2a0ccbf66ffb.png)

### デフォルトでは syntax highlight が無いので追加

```shell
npm install --save react-syntax-highlighter
```

- `./docs/theme.js` ファイルを作成

```js
import { future } from 'mdx-deck/themes'
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'

export default {
  ...future,
  prism: {
    style: okaidia
  }
}
```

- `./docs/index.mdx` ファイルを編集

```diff
- export { future as theme } from '../themes'
+ export { default as theme } from './theme'
```

- 再度確認すると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201797/c18c48dd-380f-a956-18d8-728eec82b744.png)

いいかんじ

### ファイル構成

- node_modules は除外している
- docs 配下の *.md ファイルに、README.md には載っていない使い方などが書いてある
- docs/index.mdx が、今まで見てきたスライドの正体

```
.
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── cli.js
├── create-deck
│   ├── README.md
│   ├── cli.js
│   └── package.json
├── dist
│   ├── Appear.js
│   ├── Box.js
│   ├── Button.js
│   ├── Carousel.js
│   ├── Code.js
│   ├── Dots.js
│   ├── Flex.js
│   ├── GoogleFonts.js
│   ├── Grid.js
│   ├── Head.js
│   ├── Image.js
│   ├── Mono.js
│   ├── Notes.js
│   ├── Overview.js
│   ├── Presenter.js
│   ├── Provider.js
│   ├── Root.js
│   ├── Slide.js
│   ├── SlideDeck.js
│   ├── Timer.js
│   ├── Zoom.js
│   ├── components.js
│   ├── constants.js
│   ├── context.js
│   ├── entry.js
│   ├── index.js
│   ├── layouts
│   ├── themes
│   └── updaters.js
├── docs
│   ├── Counter.js
│   ├── advanced.md
│   ├── card.png
│   ├── code.js
│   ├── components.md
│   ├── exporting.md
│   ├── images
│   ├── index.mdx
│   ├── layouts.md
│   ├── presenter.mdx
│   ├── react.md
│   ├── theme.js
│   ├── themes.md
│   └── theming.md
├── layouts.js
├── lib
│   ├── build.js
│   ├── config.js
│   ├── dev.js
│   ├── html.js
│   ├── loader.js
│   ├── log.js
│   ├── overlay.js
│   ├── pdf.js
│   └── screenshot.js
├── loader.js
├── package-lock.json
├── package.json
├── src
│   ├── Appear.js
│   ├── Box.js
│   ├── Button.js
│   ├── Carousel.js
│   ├── Code.js
│   ├── Dots.js
│   ├── Flex.js
│   ├── GoogleFonts.js
│   ├── Grid.js
│   ├── Head.js
│   ├── Image.js
│   ├── Mono.js
│   ├── Notes.js
│   ├── Overview.js
│   ├── Presenter.js
│   ├── Provider.js
│   ├── Root.js
│   ├── Slide.js
│   ├── SlideDeck.js
│   ├── Timer.js
│   ├── Zoom.js
│   ├── components.js
│   ├── constants.js
│   ├── context.js
│   ├── entry.js
│   ├── index.js
│   ├── layouts
│   ├── themes
│   └── updaters.js
├── templates
│   └── basic
├── test
│   ├── Image.js
│   ├── __snapshots__
│   ├── components.js
│   ├── index.js
│   └── updaters.js
└── themes.js
```

## 所感

- reveal.js や spectacle に比べると基本機能は少なそうだが、自身にとっては十分
- MDX って、結局のところどうなの？ Markdown で書きたい気もする
- 未来の自分は、なんだかんだと、コレ使っていそう