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

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

試したツール達

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

今の所一番候補な mdx-deck

MDX って？

https://mdxjs.com/

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

らしい。

試す

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 で、プレゼンテーションモード。ページは連動する。

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

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

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

npm install --save react-syntax-highlighter

./docs/theme.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 ファイルを編集

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

再度確認すると

いいかんじ

ファイル構成

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 で書きたい気もする
未来の自分は、なんだかんだと、コレ使っていそう