VS Codeでコードを印刷する方法｜標準機能と便利な拡張機能を紹介

プログラミング・IT

「VS Codeでコードを書いたけど、紙に印刷してレビューしたい」
「ハイライトを付けたままきれいに出力したい」

そんなときにどうしていますか？

VS Code自体には直接「印刷」メニューはありませんが、以下の方法でコードを印刷できます：

  • PDFエクスポート後の印刷
  • 専用拡張機能による印刷
  • ブラウザ経由での印刷
  • Markdownドキュメントの印刷
  • 複数ファイルの一括印刷

この記事では、VS Codeでコードを印刷するための様々な方法を、用途別にわかりやすく解説します。

コードレビューや資料作成で、きれいに印刷されたコードが手に入るようになります！

スポンサーリンク

方法1: 拡張機能による印刷

Screenshot

Print 拡張機能

最も簡単で高機能な印刷方法です。

インストールと基本的な使い方

インストール手順

  1. VS Codeの拡張機能で「Print」を検索
  2. インストールボタンをクリック
  3. VS Codeを再起動

印刷手順

  1. 印刷したいファイルを開く
  2. Ctrl + Shift + Pでコマンドパレットを開く
  3. 「Print」と入力
  4. 「Printing: Print」を選択
  5. ブラウザが開いて印刷プレビューが表示
  6. ブラウザの印刷機能で印刷実行

ファイルを開いて、右クリック→「Print」でも印刷可能。

高度な設定オプション

settings.jsonでの詳細設定

{
  "printcode.language": "ja",
  "printcode.fontSize": "10pt",
  "printcode.lineNumbers": true,
  "printcode.tabSize": 2,
  "printcode.paper": "A4",
  "printcode.margin": {
    "top": "1cm",
    "bottom": "1cm", 
    "left": "1cm",
    "right": "1cm"
  },
  "printcode.enableWordWrap": true,
  "printcode.enableSyntaxHighlighting": true
}

設定項目の説明

  • language – 印刷時の言語設定
  • fontSize – フォントサイズ
  • lineNumbers – 行番号の表示
  • tabSize – タブサイズ
  • paper – 用紙サイズ（A4、Letter等）
  • margin – 余白設定
  • enableWordWrap – 行の折り返し
  • enableSyntaxHighlighting – シンタックスハイライト

Code Printer 拡張機能

もうひとつの人気な印刷拡張機能です。

特徴と使い方

主な機能

  • シンタックスハイライトの保持
  • 行番号の表示
  • 複数テーマの対応
  • カスタムCSSの適用

使用手順

  1. 「Code Printer」拡張機能をインストール
  2. 印刷したいファイルを開く
  3. コマンドパレットで「Code Printer: Print」を実行
  4. ブラウザで印刷プレビューが開く
  5. 印刷設定を調整して印刷

カスタマイズ設定

{
  "codeprinter.theme": "vs-dark",
  "codeprinter.fontSize": 12,
  "codeprinter.showLineNumbers": true,
  "codeprinter.wrapText": true,
  "codeprinter.customCSS": "body { font-family: 'Consolas', monospace; }"
}

Print Preview 拡張機能

より詳細な印刷制御が可能な拡張機能です。

高度な機能

  • ページレイアウトの詳細制御
  • ヘッダー・フッターの追加
  • 透かしの挿入
  • 複数列印刷の対応

方法2: ブラウザ経由での印刷

HTMLエクスポート後の印刷

手動でのHTMLエクスポート

手順

  1. VS Codeでコードを全選択（Ctrl + A）
  2. コピー（Ctrl + C）
  3. オンラインの「Code to HTML」ツールを使用
  4. ペーストしてHTMLに変換
  5. ブラウザで開いて印刷

おすすめオンラインツール

  • Highlight.js Demo – シンタックスハイライト付き変換
  • Code Prettify – Googleが提供するツール
  • Prism.js Live Demo – 軽量で高速

VS Codeの内蔵プレビュー機能活用

Markdownプレビューからの印刷

  1. コードをMarkdownのコードブロックに貼り付け
```javascript
function hello() {
    console.log("Hello, World!");
}
```
  1. Ctrl + Shift + Vでプレビューを開く
  2. プレビュー画面で右クリック → 「印刷」

ブラウザでの印刷最適化

Chrome/Edgeでの印刷設定

推奨設定

  • 用紙サイズ: A4
  • 余白: 最小
  • 倍率: 75-85%（コードに応じて調整）
  • 背景のグラフィック: オン（シンタックスハイライト保持）

CSS調整のコツ

@media print {
  body {
    font-size: 10pt;
    line-height: 1.2;
  }
  
  pre, code {
    white-space: pre-wrap;
    word-break: break-all;
  }
  
  .line-numbers {
    display: block;
  }
}

方法3: Markdownドキュメントの印刷

Markdown PDF 拡張機能

技術文書やREADMEファイルの印刷に最適です。

基本的な使い方

インストールと実行

  1. 「Markdown PDF」拡張機能をインストール
  2. Markdownファイルを開く
  3. 右クリック → 「Markdown PDF: Export (pdf)」
  4. PDF生成後、通常のPDFビューアで印刷

詳細設定

settings.jsonでの設定

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "1.5cm",
  "markdown-pdf.margin.bottom": "1cm", 
  "markdown-pdf.margin.right": "1cm",
  "markdown-pdf.margin.left": "1cm",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<div style='font-size: 9px; margin-left: 1cm;'><span class='title'></span></div>",
  "markdown-pdf.footerTemplate": "<div style='font-size: 9px; margin: 0 auto;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>",
  "markdown-pdf.highlightStyle": "github",
  "markdown-pdf.breaks": false
}

Markdownで複数ファイルをまとめる

プロジェクト全体のドキュメント化

手順

  1. 新しいMarkdownファイルを作成
  2. 各ソースファイルをコードブロックとして挿入
# プロジェクト印刷用資料

## main.js
```javascript
// ここにmain.jsの内容をペースト
```

## style.css  
```css
/* ここにstyle.cssの内容をペースト */
```

## index.html
```html
<!-- ここにindex.htmlの内容をペースト -->
```
  1. Markdown PDFでPDF化
  2. 印刷実行

方法4: 複数ファイルの一括印刷

Batch Print 拡張機能

複数のファイルを一度に印刷したい場合に便利です。

使用方法

  1. 「Batch Print」拡張機能をインストール
  2. エクスプローラーで印刷したいファイルを複数選択
  3. 右クリック → 「Batch Print」
  4. 印刷設定を確認して実行

PowerShellスクリプトによる自動化

複数ファイルの自動PDF化

スクリプト例

# VS Codeの複数ファイルをPDF化するスクリプト
$files = Get-ChildItem -Path "." -Include "*.js", "*.ts", "*.py" -Recurse

foreach ($file in $files) {
    Write-Output "Processing: $($file.Name)"
    
    # VS Code CLIでファイルを開いてPDF化
    # ※実際の実装は拡張機能のAPI利用が必要
    code $file.FullName
}

印刷品質の向上テクニック

フォントとサイズの最適化

コードに適したフォント設定

おすすめフォント

  • Consolas – Windows標準、読みやすい
  • Monaco – Mac標準、バランス良好
  • Source Code Pro – Adobe製、オープンソース
  • Fira Code – リガチャ対応

フォントサイズの目安

  • A4印刷: 9-11pt
  • A3印刷: 12-14pt
  • プレゼン用: 14-16pt

行間と余白の調整

最適な設定値

body {
  font-size: 10pt;
  line-height: 1.3;
  margin: 1cm;
}

pre {
  font-family: 'Consolas', monospace;
  font-size: 9pt;
  line-height: 1.2;
}

シンタックスハイライトの調整

印刷に適したカラーテーマ

白背景推奨テーマ

  • Light+ – VS Code標準
  • GitHub Light – GitHubスタイル
  • Atom One Light – Atom風

ダークテーマの印刷対応

{
  "printcode.theme": "light",
  "printcode.invertColors": false,
  "printcode.backgroundColor": "#ffffff"
}

ページレイアウトの最適化

A4サイズでの効果的なレイアウト

推奨設定

  • 行数: 50-60行/ページ
  • 文字数: 80-100文字/行
  • 余白: 上下1.5cm、左右1cm
  • フォントサイズ: 9-10pt

横長コードの対処法

長い行の処理

  1. 折り返し設定: word-wrap: break-word
  2. 横向き印刷: A4横向きで幅を確保
  3. フォントサイズ縮小: 8ptまで縮小
  4. A3印刷: より大きな用紙を使用

実用的な印刷例

コードレビュー用の印刷

効果的なレビュー資料作成

準備するもの

  • 修正前後の比較
  • 行番号付きコード
  • コメント記入欄

Markdownテンプレート

# コードレビュー資料

## 修正内容
- [ ] 機能A の実装
- [ ] バグB の修正
- [ ] パフォーマンス改善

## 修正前
```javascript
// 修正前のコード
```

## 修正後  
```javascript  
// 修正後のコード
```

## レビューコメント
（印刷後に手書きで記入）

プレゼンテーション用の印刷

見栄えの良い配布資料

設定のポイント

  • 大きめのフォント（12pt以上）
  • 余白を広く（2cm以上）
  • ヘッダーにタイトルを追加
  • ページ番号を表示

CSS設定例

@media print {
  body {
    font-size: 12pt;
    margin: 2cm;
  }
  
  h1, h2 {
    page-break-after: avoid;
  }
  
  pre {
    page-break-inside: avoid;
    border: 1px solid #ccc;
    padding: 1em;
  }
}

トラブルシューティング

よくある問題と解決方法

文字化けが発生する

原因と対策

  1. エンコーディング: UTF-8で保存し直す
  2. フォント: 日本語対応フォントを指定
  3. ブラウザ設定: 文字エンコーディングを確認
{
  "printcode.encoding": "utf-8",
  "printcode.font": "Consolas, 'MS Gothic', monospace"
}

レイアウトが崩れる

レスポンシブ印刷CSS

@media print {
  * {
    box-sizing: border-box;
  }
  
  .container {
    width: 100% !important;
    max-width: none !important;
  }
  
  pre {
    white-space: pre-wrap;
    overflow: visible;
  }
}

色が印刷されない

背景色の印刷設定

  1. ブラウザの印刷設定で「背景のグラフィック」をオン
  2. CSS で色を強制指定
@media print {
  .keyword {
    color: blue !important;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}

ページが途中で切れる

改ページ制御

@media print {
  .function, .class {
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .page-break {
    page-break-before: always;
  }
}

高度な印刷カスタマイズ

独自CSSテンプレートの作成

カスタム印刷スタイルの作成

custom-print.css

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap');

@media print {
  body {
    font-family: 'Source Code Pro', monospace;
    font-size: 9pt;
    line-height: 1.2;
    margin: 1cm;
  }
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1cm;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 0.2cm;
    font-size: 8pt;
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.8cm;
    text-align: center;
    font-size: 8pt;
    color: #666;
  }
  
  .line-number {
    color: #666;
    margin-right: 1em;
    user-select: none;
  }
  
  .comment {
    color: #008000;
    font-style: italic;
  }
  
  .keyword {
    color: #0000ff;
    font-weight: bold;
  }
  
  .string {
    color: #a31515;
  }
}

印刷用の自動化スクリプト

Node.jsによる印刷自動化

package.json

{
  "scripts": {
    "print-docs": "node scripts/generate-print-docs.js"
  },
  "devDependencies": {
    "puppeteer": "^13.0.0",
    "highlight.js": "^11.0.0"
  }
}

generate-print-docs.js

const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const hljs = require('highlight.js');

async function generatePrintDocs() {
  const files = fs.readdirSync('./src').filter(f => f.endsWith('.js'));
  
  let html = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>プロジェクト印刷用資料</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.0/styles/github.min.css">
      <style>
        body { font-family: 'Consolas', monospace; margin: 1cm; }
        .file-section { page-break-before: always; }
        .file-title { font-size: 14pt; font-weight: bold; margin-bottom: 1em; }
        pre { font-size: 9pt; line-height: 1.2; }
      </style>
    </head>
    <body>
  `;
  
  files.forEach((file, index) => {
    const content = fs.readFileSync(path.join('./src', file), 'utf8');
    const highlighted = hljs.highlight(content, {language: 'javascript'}).value;
    
    html += `
      <div class="file-section">
        <div class="file-title">${file}</div>
        <pre><code>${highlighted}</code></pre>
      </div>
    `;
  });
  
  html += '</body></html>';
  
  // PDF生成
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  await page.pdf({
    path: 'project-print.pdf',
    format: 'A4',
    margin: { top: '1cm', bottom: '1cm', left: '1cm', right: '1cm' }
  });
  
  await browser.close();
  console.log('印刷用PDFを生成しました: project-print.pdf');
}

generatePrintDocs();

まとめ

VS Codeでコードを印刷する方法をまとめました：

基本的な印刷方法

  • PrintCode拡張機能 – 最も簡単で高機能
  • Code Printer拡張機能 – カスタマイズ性が高い
  • Markdown PDF – ドキュメント印刷に最適
  • ブラウザ経由 – 手軽な方法

高品質な印刷のコツ

  • 適切なフォントとサイズの選択
  • 印刷用CSSでレイアウト最適化
  • シンタックスハイライトの調整
  • ページ区切りの制御

実用的な設定例

すぐ使える基本設定

{
  "printcode.fontSize": "10pt",
  "printcode.lineNumbers": true,
  "printcode.enableWordWrap": true,
  "printcode.paper": "A4",
  "printcode.margin": {
    "top": "1cm",
    "bottom": "1cm",
    "left": "1cm", 
    "right": "1cm"
  }
}

プロフェッショナル設定

{
  "printcode.theme": "github",
  "printcode.enableSyntaxHighlighting": true,
  "printcode.showFilename": true,
  "printcode.showLineNumbers": true,
  "printcode.fontSize": "9pt",
  "printcode.customCSS": "body { font-family: 'Source Code Pro', monospace; }"
}

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました