1. はじめに
セットアップ手順書の類はExcelで作成してしまうのが早くて楽ですが、PCの初期セットアップに関しては他の媒体での手順書参照になりがちです。印刷の場合は判読限界まで文字が小さかったり、印刷のハーフトーンで文字の輪郭が欠けたりします。別PCで参照できる場合はまだマシですが、それでもURLや設定項目の手打ちという苦行が不可避です。
PDFなら初期状態のWindows PCでも開いて参照できますし、Markdownならセットアップ作業中のPCからメモ帳で修正できます。VSCodeの導入ができるなら実際の作業との乖離をリアルタイムでPDFに反映させるのもOKです。
本記事では以下のOSで動作確認を行っています。
「PlantUMLを埋め込む」「Linux環境で編集する」「Dockerコンテナで運用する」などの場合は、以下の記事を参照ください。
2. Visual Studio Codeの設定
2.1 拡張機能のインストール
VSCodeがインストール済であることを前提に進めます。VSCodeの拡張機能から以下の拡張機能をインストールしてください。
Japanese Language Pack for Visual Studio Code
Markdown Preview Enhanced
2.2 Chromeパスの設定
Markdown Preview EnhancedではChromium系ブラウザの機能を使用して文書をPDF化します。ここでは、Windowsにデフォルトで入っているEdgeを使用します。VSCodeの設定から以下の項目を変更してください。
C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
2.3 PDFでの出力方法
VSCodeのコマンドパレットから以下を実行するとプレビュー画面が表示されます。
Markdown: Markdown Preview Enhanced: Open Preview to the Side
プレビュー画面上で右クリックして以下のように選択すると、.md ファイルと同じフォルダに同名の .pdf ファイルが出力されます。既存のファイルは上書きされます。
3. よく使うMarkdown記法
3.1 PDFのページ設定
.md ファイルの冒頭に以下を記載してページ設定します。
---
puppeteer:
format: "a4"
landscape: false
printBackground: true
margin:
top: 15mm
bottom: 15mm
left: 15mm
right: 15mm
---
3.2 見出しの挿入
行頭に # を記載すると見出しになります。# の数を増やすと見出しが小さくなります。
# PCセットアップ手順書をMarkdownで書いてPDFで保存する
## 1. はじめに
セットアップ手順書の類はExcelで作成してしまうのが早くて楽ですが、PCの初期セットアップに関しては他の媒体での手順書参照になりがちです。
## 2. Visual Studio Codeの設定
### 2.1 拡張機能のインストール
VSCodeがインストール済であることを前提に進めます。VSCodeの拡張機能から以下の拡張機能をインストールしてください。
3.3 画像の挿入
以下の記法で画像を挿入できます。.md ファイルと同名のフォルダを作成して画像ファイルを配置するのがおすすめです。
3.4 表の挿入
以下の記法で表を挿入できます。
| サイト | URL |
| - | - |
| Google | https://www.google.com/ |
| Yahoo! JAPAN | https://www.yahoo.co.jp/ |
| サイト | URL |
|---|---|
| https://www.google.com/ | |
| Yahoo! JAPAN | https://www.yahoo.co.jp/ |
3.5 改ページの挿入
以下のタグセットを記載した部分でPDFが改ページされます。
<div style="break-before: page;"></div>
4. おわりに
VSCode、VSCode拡張機能およびEdgeは多くの職場環境で使用が認められているのではないかと思います。PCセットアップ時の手打ち作業や、手順書の記載と実作業との乖離が少しでも軽減されたらいいなと思う今日この頃です。
| ◀️ 前の記事 | 次の記事 ▶️ |
|---|---|
| 【Docker】Java SE Development Kit 17環境を構築する | 【Linux対応】商用でも無償で利用できるOSSなCADソフト |