PowerPointやKeynoteにVS Codeの色付きソースコードを貼る

Web系エンジニアでPowerPointを好む人は（主観的に見て）少数派かもしれませんが、実は**VS Codeからシンタックスハイライト（色）のついたテキストをコピペできます**。

（注：以下の方法は、**貼り付け先がKeynoteの場合でも同様に可能です**。便宜上、PowerPointメインで説明します。ちなみに、Keynoteの方が仕上がりが綺麗です。）

## やりたいこと

以下、VS Codeで次のようなファイル（index.html）を開くとします。

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>サンプル</title>
    <script>
      window.onload = function(){
        // 要素を取得
        var elem = document.getElementById("sample");
        // テキスト部分を出力
        console.log(elem.textContent);
      }
    </script>
  </head>
  <body>
    <p>ただのサンプル<p>
  </body>
</html>
```

この中から、次の`<script>...</script>`内を色付きでコピペしたい！としましょう（以下、「コピーしたいテキスト」と呼びます）。

```js
      window.onload = function(){
        // 要素を取得
        var elem = document.getElementById("sample");
        // テキスト部分を出力
        console.log(elem.textContent);
      }
```

## 検証した環境

- macOS Mojave 10.14
- Visual Studio Code 1.28.2
- Word for Mac 16.18 (Office 365サブスクリプション)
- PowerPoint for Mac 16.18 (Office 365サブスクリプション)

※ Windows環境は検証していません。（うまくいった場合は、コメントにて報告いただければ幸いです）

## 方法1（拡張不要）：Word経由で貼り付ける

まず、少し面倒ですが、拡張なしのプレーンなVS Codeで可能な方法を紹介します。

※ **Keynoteに貼り付ける場合は、Wordを経由しなくてもOKです！**

1. WordとPowerPointを開く
    - Wordでは、新規文書（白紙の文書） を開く
    - PowerPointでは、ソースコードを貼り付けたいスライドを開いておく
2. PowerPointで、テキストボックス or 図形の四角を作る
    - 白背景が楽です
3. VS Codeから「コピーしたいテキスト」を普通にコピーして、**MS Wordに貼り付ける**（図1）
    - **貼り付けオプションで「元の形式を保持」 を選択**
4. Wordの「コピーしたいテキスト」を選択してコピーし、**PowerPointに貼り付ける**（図2）
    - **貼り付けオプションで「元の形式を保持」 を選択**
5. 行間やインデントを手動で微調整（図3）
    - 個人的には、手修正でなんとかなる範囲だと思います

![スクリーンショット 2018-10-18 20.14.47.png](https://qiita-image-store.s3.amazonaws.com/0/10473/aa49b510-9822-1161-8f25-d3b941b9b54b.png)
図1：VS CodeからWordに貼り付けた

![スクリーンショット 2018-10-18 20.15.07.png](https://qiita-image-store.s3.amazonaws.com/0/10473/d315e526-4d9a-c710-9911-258701ce4cc9.png)
図2：WordからPowerPointに貼り付けた

![スクリーンショット 2018-10-18 20.15.31.png](https://qiita-image-store.s3.amazonaws.com/0/10473/9d5c59a6-b7e0-bc4d-cc5a-0c5224eb54e3.png)
図3：行間やインデントを微調整

### Q: なぜVS Codeから直接PowerPointにペーストしないの？

A: インデントが完全に潰れてしまうからです。

## 方法2：VS Codeの拡張機能「Copy Syntax」を利用する

VS Codeの拡張機能「Copy Syntax」を利用すると、より簡単に色付きテキストをコピペできます。
個人的には、こちらの方がおすすめです。

[Copy Syntax - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=atian25.copy-syntax)

インストールすると、VS Code上で右クリックしたときに次のメニュー項目が出ます。

- Copy Syntax
    - シンタックスハイライト付きでコピーする（単純な場合）
- Copy Syntax As...
    - ファイル形式を指定して、シンタックスハイライト付きでコピーする（複雑な場合）

※ いずれも、PowerPoint上でペーストした後、**貼り付けオプションで「元の形式を保持」 を選択してください**。

上記のHTMLファイルの場合、純粋なHTML部分であれば「Copy Syntax」を使ってコピーできます。Wordを経由せずにPowerPointへ（比較的）美しくコピペできます。インデントも（ほとんど）保持されます。（図4）

ただし、上記の「コピーしたいテキスト」（HTML中に`<script>`タグでJavaScriptが埋め込まれている場合）は、少し複雑なので「Copy Syntax As...」を選択します。

ポップアップが出るので、対応する拡張子（この場合は「`js`」）を入力すると、JavaScriptのシンタックスハイライトとしてテキストがコピーされます。（図5）

![スクリーンショット 2018-10-18 20.29.08.png](https://qiita-image-store.s3.amazonaws.com/0/10473/4c8e18a7-e417-58a2-9958-954809ab7f9a.png)
図4：「Copy Syntax」でHTMLをコピー

![スクリーンショット 2018-10-18 20.30.26.png](https://qiita-image-store.s3.amazonaws.com/0/10473/cc2da46d-9f8c-2a86-b6a3-49fdf9ebaf06.png)
図5：「Copy Syntax As...」で`<script>`部分をコピー

参考: [How to Copy Visual Studio Code with Syntax Highlighting to Other Applications • thisDaveJ](https://thisdavej.com/how-to-copy-visual-studio-code-with-syntax-highlighting-to-other-applications/)

以上です。