Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@sky_y

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

      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

以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
22
Help us understand the problem. What are the problem?