Edited at

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

More than 1 year has passed since last update.


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