Help us understand the problem. What is going on with this article?

スライドにソースコードを貼る 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

wantedly
「シゴトでココロオドル」ためのビジネスSNS「Wantedly」の開発・運営をしています。
https://wantedlyinc.com/ja/presentations
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away