CODEPOOL

趣味でやるプログラミング関連のMEMO置き場。

できる限りWindows 10のプリイン環境を使って見やすいコードの説明資料を作る

どうも、キヨタです。

基本このブログは仕事に関係ない趣味のプログラミング関係の話をダラダラと書くことを目的としていますが、 本日は業務上で懇切丁寧なコード説明資料を作りたくなったので環境を整えたという話を書こうと思います。

検討背景

  • 自分の職場はOSSフリーソフトなどの活用にあまり免疫がなく関係者の説得が面倒なので最小限に抑えたい
  • コーディングにうとい人を威嚇しないよう白背景のドキュメントを作りたい
    (背景が黒いだけで怖がる人がいる)
  • ダウンロードしてローカルでも見れるようにOfficeドキュメントを使いたい
    (はてブロとかのが書くのは楽なんですが機密情報とかDRMとか)

俺得要件

  • 最終ドキュメントはExcel (キャンバスがほぼ無限大)
  • ドキュメント上でのコード自体の読みやすさ
  • コーディング時はDark Theme
  • ドキュメントはLight Theme

準備したもの

azure.microsoft.com

言わずと知れた人気エディター。
Microsoft製なのでリッチテキスト形式でコピーができる!
Excelシンタックスハイライトしたコードを貼り付けられる!


  • Toggle Light/Dark Theme

marketplace.visualstudio.com

Visual Studio CodeのExtention。
Ctrl + Shift + Alt + T でLightテーマとDarkテーマが切り替えられる。

システムのカラースキームに合わせてトグルする設定があるらしいが、今回は不要なのでVisual Studio Codesettings.json に下記の1行を追記した。
これを追記しないとVisual Studio Code起動時に謎ポップアップが出てくるので割と鬱陶しかった。

    "window.autoDetectColorScheme": false,

その他設定

Web作ってたりするとどうしても日本語書く必要が出てきてしまうのでフォント選定がしたくなった。
Visual Studio Codeのデフォルトだと日本語はMS ゴシックになっているようで不快感がすごかったので、 Windows 10にデフォルトで入っている綺麗な等幅フォントである游ゴシックを採用。
英字フォントのデフォルトになっているConsolasは結構好みなので残した。

Visual Studio Codesettings.jsonに下記の1行を追記した。

    "editor.fontFamily": "Consolas, '游ゴシック Medium', 'Courier New', monospace",

できた!

f:id:yujikiyota:20200619174459p:plain
できる限りWindows 10のプリイン環境を使って見やすいコードの説明資料を作る

できたできた!
作業手順めっちゃ簡単ですごく満足感高いです。

  1. コーディングする (Dark Theme)
  2. Ctrl + Shift + Alt + T でLightテーマに切り替え
  3. Visual Studio Code上でソースコードをコピー
  4. Excelに貼り付けるとシンタックスハイライトされた白背景のコードが!

わーい!

若干気になる挙動

  • Ctrl + C でコピーしてExcelに貼り付けても何もペーストされない

何故かわかりませんが Ctrl + C でコピーするとExcelで貼り付けても何もペーストされませんでした。
なんか Visual Studio CodeVim Extention あたりが悪さしている気がしますが、 とりあえず下記の方法ではシンタックスハイライト含めてちゃんとペーストできました。

まぁ、すごい頻繁にやる作業ではないのでこれぐらいは許容範囲内ですかね。 個人的には十分満足できました。

よかったよかった。