はじめに
先日、#railsdm2019 で @kei-p さんと一緒に登壇しました！ご覧くださった方々ありがとうございました。
jQuery + Sass な SPA Rails アプリを React + CSS in JS にリプレースした話 #railsdm2019 - Speaker Deck
こちらの発表スライド作成中、サンプルのソースコードをどう載せるか、 @kei-p さんとあれこれ試行錯誤したのですが、簡単ですが便利な方法がありましたのでご紹介します。
課題
- シンタックスハイライト反映済みでコードを貼り付けたい
- なるべく大きいフォントサイズにしたい(スクリーンから遠い人にも見やすいように)
- サンプルコードをサクッと修正できるように
tl;dr
Markdown エディタで HTML 形式でシンタックスハイライトされたソースコードを貼り付けるだけで OK でした。
こんな感じで表示できるようになりました。
事前準備
まず、お好みのシンタックスハイライトを適用した状態でソースコードを表示可能な Markdown エディタを準備します。
HTML 文書形式でソースコードを表示できる Markdown エディタでしたら何でも OK です。
Markdown エディタ
- Boostnote
- Quiver
- VSCode
- ...
手順
ソースコード準備
まず、お好みのシンタックスハイライト可能な Markdown エディタでサンプルソースコードを表示します。
ReactDOM.render(
<div>
<Button>
Push it
</Button>
</div>,
document.getElementById('root')
)
ソースコードコピー
次に表示されたソースコードを選択し、コピーします。以下の例では Boostnote を使っています。
ソースコード貼り付け
作成中のスライドにソースコードを貼り付けます。今回は Google スライドでしたが、Keynote など、別のスライド作成ソフトでも OK です。
背景色が完全にあたっていないので中途半端な表示になっていますが、文字にシンタックスハイライトは適用されています。
背景色・フォントサイズ調整
最後に背景色・フォントサイズを調整して完成です。
メリット
- 画像キャプチャを直接貼り付ける場合に比べ、解像度のノイズを気にする必要がなくなる
- フォントサイズの拡大も簡単
- Markdown エディタ上でソースコードの修正もしやすい
デメリット
- 背景色が適用されないので、貼り付けする度背景色を調整する必要がある
おわりに
簡単ではあるのですが、実際に何枚もソースコードをスライドに貼り付ける作業をした僕としてはかなり便利な方法だと思います。
ソースコードをスライドに貼り付ける方法で悩んでいる方はぜひ試してみて下さい！