ひろろの思うがままに。

自由奔放。思ったことや感じたこと、そんなことを書き溜めて、レベル上げて。

【backslide】というツールが便利すぎた

※ 今更な気もするけど上げとこ ※

プレゼン資料を用意する時にパワポのように凝った機能はなくてもいいんだけど、シンプルかつちょっとおしゃんな感じで作りたい。

そういう時ありますよね?少なくとも私はパワポ使えません!

そんな時に便利なのが「backslide」になります!

Markdonwで書けてRemark.jsがいい感じにやってくれる、そんなツールです。

https://github.com/sinedied/backslide

HTMLでのプレゼンかつ、PDFにも変換できちゃいます。

f:id:tack13:20220302214955j:plain
back_slide_image

※ 画像は引用です。

こんな感じ => 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つくらいしかないのに全く覚えてないので備忘録。