# MacのKeynoteにハイライトされた状態でコードを貼り付ける方法

URL: https://webrandum.net/keynote-code-highlight/
公開日: 2021-12-20
更新日: 2021-12-20
カテゴリー: 資料作成
タグ: Keynote
出典: Webrandum（著者: サイトウ マサカズ）

最近Keynoteにコードを貼り付ける機会があり、なにかいい方法はないか調べたので、備忘録として残しておきます。

せっかくスライドに力を入れるのであれば、ソースコードもキレイにハイライトしたいものです。

## Highlight（アプリ）を使う方法

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/5f87bed8d3a0ec4c957673022dbe2aa202191e59758522d1ef185d0492a5385c.webp)GitHub - taggon/highlight: Rich featured syntax highlighter for Keynote slides.https://github.com/taggon/highlightRich featured syntax highlighter for Keynote slides. - GitHub - taggon/highlight: Rich featured syntax highlighter for Keynote slides.](https://github.com/taggon/highlight)

調べてみると「[Highlight](https://github.com/taggon/highlight)」というソースコードをハイライトしてKeynoteに貼るためのアプリがありました。

ちなみに、リッチテキストが表示できるアプリであれば、Keynoteに限らずペーストできます。

最終バージョンは2021年12月の現時点で2018年10月のv1.4.4だったので、少し心配でしたが問題なく使用できました。

使い方は簡単で、アプリを起動するとメニューバーにHightlightのアイコンが表示されます。

コードをコピーした状態で［Highlight Code (Auto-detect)］をクリックすると、コピーしてあるコードに合わせて自動でハイライトしてくれます。

![［Highlight Code (Auto-detect)］](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_1-5.png)

言語を指定してハイライトしたい場合は［Highlight Code］から言語を選択すればOK。

あとはKeynoteにペーストするだけで、色付きの状態でペーストされます。

![デフォルトのコードハイライト](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_2-5.png)

デフォルトのスタイルだとあまりキレイにハイライトしてくれないので、［Styles］から好きなスタイルを選択しましょう。

自分の場合は「Atom One Dark」がお気に入りです。

![［Styles］のスタイル一覧](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_3-5.png)

スタイルの種類もかなり多いので、困ることはなさそうです。

Keynoteにペーストして、背景だけ黒くして見やすくした状態が下の画像です。

![Atom One DarkのハイライトをKeynoteに貼り付け](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_4-4.png)

テキストなので、もちろん後から多少の修正はできます。

色が変わる境目の部分は思ったようにいかなかったりするので、軽微な修正しかできなさそうですが、大きく変わる場合はまたHighlightすれば問題ありません。

時間もかからないので、この方法が1番良さそうです。

## 画像を生成して貼り付ける方法

[![](https://www.google.com/s2/favicons?domain=carbon.now.sh)carbon.now.sh![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/08f78024e69544677bd246405676a57b2eea9c3b78faa03b5704bd805f51197d.webp)Carbonhttps://carbon.now.shCarbon is the easiest way to create and share beautiful images of your source code.](https://carbon.now.sh)

入力したコードをシンタックスハイライトした状態で画像化してくれる[Carbon](https://carbon.now.sh/)というサイトがあります。

テーマ設定もかなり細かくできるのと、出来上がる画像もMacっぽくてかなりキレイです。

使い方はサイトにアクセスして、コードをペースト、背景画像や歯車アイコンから細かいスタイルを設定して「Export」でPNG画像がダウンロードできます。

ちなみにKeynoteで使用するときは、背景画像を透明で指定しておかないと、背景に塗りが入ったままになるので注意が必要です。

![Carbonで画像の生成](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_5-4.png)

実際に背景画像だけ透明にしてExportしてKeynoteに貼り付けてみました。

![CarbonをKeynoteに配置](https://webrandum.net/mskz/wp-content/uploads/2021/12/image_6-4.png)

本来はTwitterなどのSNSに投稿する目的に作られたサイトのようなので、左上のメニューがかなり大きいのと、シャドウもかなり強めです。

この辺りを調整する必要があります。

また、1度画像生成してしまうと、あとから修正したいときに再度画像を生成しないといけないので細かく何度も修正する場合は向きません。

## ターミナルコマンドを使用する（不可）

他にもターミナルコマンドを使用して使用する方法もあったようです。

[![](https://www.google.com/s2/favicons?domain=pirosikick.hateblo.jp)pirosikick's diary![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/e51fe734a0491de7556af2c8da37503cc35a9ef089eca2cdb54301e815686214.webp)Keynoteにソースコードを貼る - pirosikick's diaryhttps://pirosikick.hateblo.jp/entry/2014/08/27/015535小ネタ。毎回調べてる気がするので書いておく。 Code highlighting for Keynote presentations # 1. brewでhighlightをインストール $ brew install highlight # 2. 貼り付けたいソースコードをクリップボードにコピーしhighlight実行 $ pbpaste| highlight --syntax=js -O rtf | pbcopy # ファイルの場合はcat $ cat file.js | highlight --syntax=js -O rtf | pbcopy # 3. クリップボードにコピーされているの…](https://pirosikick.hateblo.jp/entry/2014/08/27/015535)

上記記事を参考に「[Code highlighting for Keynote presentations](https://gist.github.com/jimbojsb/1630790)」をインストールしてコマンドを叩いてみましたが、ハイライトされませんでした。

インストール自体はされて、コマンド実行時も特にエラーなどは出ませんでしたが、ペーストされるテキストは黒一色です。

ただ、さすがに毎回コマンドを叩くのは現実的ではありませんし、たまにしか使わないコマンドを覚えたりするのも面倒です。

今後はHighlight（アプリ）を使ってハイライトを行うようにします。