【backslide】というツールが便利すぎた
※ 今更な気もするけど上げとこ ※
プレゼン資料を用意する時にパワポのように凝った機能はなくてもいいんだけど、シンプルかつちょっとおしゃんな感じで作りたい。
そういう時ありますよね?少なくとも私はパワポ使えません!
そんな時に便利なのが「backslide」になります!
Markdonwで書けてRemark.jsがいい感じにやってくれる、そんなツールです。
https://github.com/sinedied/backslide
HTMLでのプレゼンかつ、PDFにも変換できちゃいます。
※ 画像は引用です。
こんな感じ => https://sinedied.github.io/backslide/#1
環境構築
インストール
backslideをnpmからインストールします。
npm install -g backslide
使用方法
よく使うコマンドだけ
Usage: bs [init|serve|export|pdf] [options] Commands: i, init Init new presentation in current directory e, export [files] Export markdown files to html slides [default: *.md] s, serve [dir] Start dev server for specified dir. [default: .] p, pdf [files] Export markdown files to pdf [default: *.md] ...(割愛)
テンプレートの作成
※ 初回のみ
bs init --template
ディレクトリ内にpresentation.md
というファイルが作成されるので、編集して資料を作成します。
基本的には Markdown記法 で書けますが、remarks.js 用の記法や backslide のテンプレートで用意されている場合もあります。
HTMLへの変換
拡張子が*.md
のファイルを HTML ファイルに変換します。
bs e
dist
というフォルダが作成され、その中にHTML
ファイルが出力されます。
PDFへの変換
拡張子が*.md
のファイルをPDF
ファイルに変換します。
bs p
pdf
というフォルダが作成され、その中にPDF
ファイルが出力されます。
プレビュー
ローカルサーバーを起動し、Markdown のライブプレビューを可能にします。
bs s
デフォルトだとlocalhost:4100
にアクセスするとHTML
に変換された状態で確認できます。
できること
- 変数の定義
- ページのクラス属性
- グリッド
- 文字修飾
とかとか。
テンプレートの作成で記載しましたが、presentation.md
の中に使用できる記法が書かれているので実際に見ながらやるのが手っ取り早いと思います(さぼり)。
まとめ
Markdownなのでそんなに考えずにパッと作れて便利でした。
てか使うコマンドも3つくらいしかないのに全く覚えてないので備忘録。