src2png (puppeteerを使ってソースコードを画像化するツール)

パワポなどのプレゼンツールを使うとき、プログラムを画像として貼り付けたいことがある。そういう願いを実現する、いわゆる便利ツール。

mplewis/src2png: 📸💻 Turn your source code into beautiful syntax-highlighted images.

とりあえず動作確認までやった。いずれ使う機会があるかもしれないし、ないかもしれない。

使い方

Fira Codeフォントをインストールする。

$ yarn install
$ brew install imagemagick  # trims image margins
$ node src/camera.js YOUR_SOURCE_FILE [YOUR_SOURCE_FILE [...]]
$ ls ./tmp  # screenshots are saved here

動作

  • Poiという開発サーバーを立て、Vue(app.js)経由でソースコードをロード(code.jsx)している。Prismというhighlighterでコードを色付けしている。
  • Puppeteerでページを読み込みコードをスクショ化する。

FAQがある。牛刀だが、満足できる道具がなかったからという話。