kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

シンタックスハイライトをしたコードを PowerPoint / Keynote に載せる

日頃からプレゼンテーション資料を作る場面が多く,PowerPoint と Keynote をよく使う.さらにプレゼンテーション資料にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せることもある.今まで何度も「どうやってシンタックスハイライトをしてる?」と聞かれたため,毎回同じことを教えるのではなく,サッと URL を渡せるようにブログにまとめることにした.

なお,2017年に公開した 「個人的な Keynote ベストプラクティス 2017」 highlight コマンド と pbcopy コマンドを組み合わせる方法を載せているけど,今回はさらに選択肢を増やして「計3種類」紹介したいと思う.

  1. Visual Studio Code を使う
  2. highlight コマンド と pbcopy コマンドを組み合わせて使う
  3. Carbon を使う

kakakakakku.hatenablog.com

1. Visual Studio Code を使う

最もお手軽に使えるのは Visual Studio Code (VS Code) だと思う.VS Code から直接コピーすると,PowerPoint / Keynote にシンタックスハイライトをしたコードをペーストできる.案外知られてなく,紹介すると驚かれることもある.なお,IntelliJ IDEA / GoLand なども同様に使えるため,慣れたエディタから直接コピーすると良いと思う.以下は A Tour of Go のサンプルコードを Keynote に載せている.

f:id:kakku22:20191001233130p:plain

2. highlight コマンド と pbcopy コマンドを組み合わせて使う

次に紹介するのは highlight コマンド と pbcopy コマンドを組み合わせる方法で,数年前から個人的にずっと使っている.以下のようにファイルを指定してコマンドを実行すると,自動的にクリップボードに保存されるため,そのまま PowerPoint / Keynote にペーストできる.以下は同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf main.go | pbcopy

f:id:kakku22:20191001233156p:plain

また highlight コマンドに --style オプションを設定するとデザインを変えることもできる.以下は Moria スタイルを設定し,同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf --style Moria main.go | pbcopy

f:id:kakku22:20191001233215p:plain

highlight コマンドの詳細は以下に載っている.

www.andre-simon.de

3. Carbon を使う

「Carbon」を使うと,シンタックスハイライトをしたコードを画像に変換できる.GitHub の実装を読むと highlight.js というライブラリに依存していた.Carbon はデザインに限らず,ウィンドウサイズ/行数/背景色など自由度高く設定できる点が良く,以下は同様のサンプルコードを Carbon で調整し,Keynote に載せている.

f:id:kakku22:20191001233234p:plain

まとめ

PowerPoint / Keynote にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せる方法を「計3種類」紹介した.目的により,自分に合った方法を選ぶと良いと思う.よく聞かれることは今後も積極的にブログに書いていくぞ!

関連記事

以下の記事も「プレゼンテーション中にうまくデモを見せる Tips」をよく聞かれるため,まとめた記事となる.

kakakakakku.hatenablog.com