ハイライト付きでプログラムソースコードをきれいに印刷できるcodePrintを作った

codePrint

https://i.gyazo.com/b42be61be7f3762df141844efaae27d8.png

service.matatsuna.net

作った経緯

コーディングしていて、複雑な部分を考える時によく印刷したソースコードにペンで書き込んだりするのですが、VS Code標準機能では印刷することができなくて、さっとweb上で欲しくて作りました。

技術的仕組み

影響を受けたブログ

blog.bulkus.net

ほぼ👆この通りです。
CodeMirror を使って言語ごとのソースコードのハイライトを付けてます。

  1. codemirror でソースコードを入力してもらう
  2. 印刷ボタンをクリックするとブラウザ標準の印刷ダイアログを出す

印刷のときに任意のコンテンツを消す

初めて知ったのですが、印刷時にcss

 @media print{} 

が呼ばれて任意のコンテンツに新たなcssを適用することができます。
今回は、

display:none;

で言語選択リストボックスや印刷ボタンを消してます。
on-ze.com

作ってみて

意外とcodemirrorの扱いが難しくて大変苦労しました。なので、VS Codeの拡張であるvscode.print を参考にさせていただきました。ありがとうございます。

「いつもソースコードを印刷しないけど、じっくり読みたい」、「手軽にハイライト付きで印刷したい」など、使いたい時にWebサービスでできるなら楽と思っているので、使ってくれたら嬉しいです。