Keynote
VSCode

スライドにソースコードを貼る 2018 Spring

ref

svg に吐くパターン(illustrator に貼る場合など,リッチテキストが利用できない場面)

Keynote にソースコードを貼る

vscode を例に説明するが,atom や IntelliJ 系の IDE でも同じようなことができるはず.

コードを書く

https://gyazo.com/f61eb4c6a8719e303467ba630e4cd318

Copy With Syntax Highlighting

https://gyazo.com/62960b65b662f816c8601cd220f68508

Keynote に貼る

https://gyazo.com/165c3bad75edb6adbcf5c90c44a17df6

文字サイズを変える

https://gyazo.com/258e3e7e6746fbc6fba05be3e5ff6e84

デザインを調整する

  • 背景色を変える
  • 太めのボーダをつける
    • コードブロックのパディング表現
    • ボーダ色は背景色と同じにしておく
  • 行間を調整する
    • 1.2 or 1.5
    • コードの量とかに合わせてかえる
  • ドロップシャドウをつける
    • スライド背景色が黒以外のときに有効

https://gyazo.com/027d6e182235996da5293490a48f9fb7

かんせい

例①

  • 黒背景だったのでドロップシャドウは消した
  • 「コード多いやろ?」のアピールであり,読ませるコードではなかったので文字サイズは小さめ

gocon2018spring.013.png
grapi: Bulding JSON API server with grpc-gateway for microservices // Speaker Deck