BETA

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

投稿日:2018-10-14
最終更新:2018-10-24

codePrint

https://twitter.com/matatsuna/status/1048516145999826944

作った経緯

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

技術的仕組み

影響を受けたブログ

https://blog.bulkus.net/post/printcode/

ほぼこの通りです。 https://codemirror.net/ を使って言語ごとのソースコードのハイライトを付けてます。

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

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

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

@media print{}

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

display:none;

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

https://on-ze.com/archives/1717

作ってみて

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

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@matatsunaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう