Edited at

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

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

MS Office なんて絶対に使わない。


試したツール達



  1. jxnblk/mdx-deck


    • なんか、説明できないんだけど、いい感じw

    • MDX で書く、React ベースなやつ。




  2. hakimel/reveal.js


    • star が、40,000 以上も付いた、泣く子も黙るやつ。

    • 多機能。




  3. FormidableLabs/spectacle


    • こちらも、star が、7,000 以上もある、React ベースのいい感じなやつ。

    • プログレスバー?のパックマンがかわいい。




  4. yhatt/marp


    • こちらも、star が、7,000 以上もある、デスクトップアプリケーション。

    • なかなか良いのだが、デスクトップアプリは求めていないことに気がついた。




今の所一番候補な mdx-deck


MDX って?


コンポーネント時代のマークダウン

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

image.png


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

image.png


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

image.png


デフォルトでは 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'


  • 再度確認すると

image.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 で書きたい気もする

  • 未来の自分は、なんだかんだと、コレ使っていそう