WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

Highlight(アプリ)を使う方法

調べてみると「Highlight」というソースコードをハイライトしてKeynoteに貼るためのアプリがありました。
ちなみに、リッチテキストが表示できるアプリであれば、Keynoteに限らずペーストできます。

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

使い方は簡単で、アプリを起動するとメニューバーにHightlightのアイコンが表示されます。
コードをコピーした状態で[Highlight Code (Auto-detect)]をクリックすると、コピーしてあるコードに合わせて自動でハイライトしてくれます。

[Highlight Code (Auto-detect)]

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

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

デフォルトのコードハイライト

デフォルトのスタイルだとあまりキレイにハイライトしてくれないので、[Styles]から好きなスタイルを選択しましょう。
自分の場合は「Atom One Dark」がお気に入りです。

[Styles]のスタイル一覧

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

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

Atom One DarkのハイライトをKeynoteに貼り付け

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

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

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

入力したコードをシンタックスハイライトした状態で画像化してくれるCarbonというサイトがあります。
テーマ設定もかなり細かくできるのと、出来上がる画像もMacっぽくてかなりキレイです。

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

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

Carbonで画像の生成

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

CarbonをKeynoteに配置

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

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

ターミナルコマンドを使用する(不可)

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

上記記事を参考に「Code highlighting for Keynote presentations」をインストールしてコマンドを叩いてみましたが、ハイライトされませんでした。

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

ただ、さすがに毎回コマンドを叩くのは現実的ではありませんし、たまにしか使わないコマンドを覚えたりするのも面倒です。
今後はHighlight(アプリ)を使ってハイライトを行うようにします。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね