LoginSignup
41
30

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-18

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>内を色付きでコピペしたい!としましょう(以下、「コピーしたいテキスト」と呼びます)。

      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
図1:VS CodeからWordに貼り付けた

スクリーンショット 2018-10-18 20.15.07.png
図2:WordからPowerPointに貼り付けた

スクリーンショット 2018-10-18 20.15.31.png
図3:行間やインデントを微調整

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

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

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

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

Copy Syntax - Visual Studio Marketplace

インストールすると、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
図4:「Copy Syntax」でHTMLをコピー

スクリーンショット 2018-10-18 20.30.26.png
図5:「Copy Syntax As...」で<script>部分をコピー

参考: How to Copy Visual Studio Code with Syntax Highlighting to Other Applications • thisDaveJ

以上です。

41
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
30