0. はじめに
個人環境にMarkdown Preview Enhancedをセットアップしてみたところ、
妙なところに癖があって手間取ったので手順を書き残しておくことにしました。
先達の投稿には感謝です。
1. Markdown Preview Enhancedのすゝめ
こちらの記事から引用しています。
Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う (2017-10月時点) #VSCode - Qiita
1.1 Markdownのメリット
- テキスト形式のため、とにかく編集が簡単。
- テキスト形式なので、GitHubのプルリクエスト形式やGitLabのマージリクエストのプロセスに馴染みやすく、ここ、間違ってない？と誰かが修正することも容易。
- テキスト形式のため、変更差分の管理が容易である。
- テキスト形式のため、各種プログラムによる処理／自働化に馴染みやすい。
1.2 Markdown Preview Enhancedで出来るようになること
- 様々なUML図を描画する。(PlantUML連携)
- 様々な数式を描画する。
$\sum_{n=1}^{100}foo(n)+bar(n^2)$
- CSV表の取り込み
- 別フォーマットでのエクスポート
2. PlantUMLを使うための下準備
こちらの記事から引用しています。
Visual Studio CodeでPlantUMLを使うメモ (Windows編).md - GitHub
PlantUMLの現場活用例 #uml - Qiita
2.1 Graphvizのインストール
PlantUMLはdotを使って図を作成するので、
あらかじめGraphvizをインストールしておく必要があります。以下URLから、
stable版のインストーラをダウンロード＆インストールしてください。
https://www.graphviz.org/download/
dotコマンドが使えるように環境変数PATHにGraphvizのパスが必要です。
インストール時は「Add Graphviz to the System PATH」を選択してください。
2.2 Javaのインストール
JavaにはOpenJDKを使用します。
昔のPlantUML導入記事ではOracle Javaが使用されているものもありますが、
2019年4月16日から有償化されているため商用利用では使用できません。
以下よりOpenJDKをダウンロードします。
https://jdk.java.net/
zipを解凍して出てくるフォルダを以下にコピーします。
フォルダ名は「OpenJDK」にリネームしておくと良いでしょう。
C:\Users\ユーザー名\AppData\Local
コピーできたら、ユーザー環境変数「Path」に以下を追加します。
| 変数 | 値 |
|---|---|
| Path | C:\Users\ユーザー名\AppData\Local\OpenJDK\bin |
コマンドプロンプトで「java --version」を入力し、
OpenJDKのバージョン情報が出力されたらインストール成功です。
2.3 環境変数の設定
あと、ユーザー環境変数に以下を追加しておきましょう。
これはPlantUMLで大きな図を描くと途切れてしまう対策です。(参考URL)
| 変数 | 値 |
|---|---|
| PLANTUML_LIMIT_SIZE | 8192 |
3. Visual Studio Codeの設定
こちらの記事から引用しています。
VSCode | Visual Studio Codeを日本語化する
Markdownの文書にPlantUMLを使ってUMLを埋め込む #VSCode - Qiita
Markdown Preview EnhancedでPDF出力する。 #VSCode - Qiita
3.1 Visual Studio Codeのインストール
VSCodeを以下よりダウンロードし、インストールします。
https://code.visualstudio.com/
インストール設定はデフォルトでも問題ありませんが、
使い勝手が良くなるのでコンテキストメニューの追加をオススメします。
3.2 Visual Studio Codeを日本語化する
以下の拡張機能をインストールします。
- Japanese Language Pack for Visual Studio Code
インストールが完了したらVSCodeの再起動を行います。
完了後に画面右下に「Change Language and Restart」と表示されるので
クリックしてください。
3.3 VSCodeの拡張機能のインストール
VSCodeの拡張機能から以下の拡張機能を導入します。
- PlantUML
- Markdown Preview Enhanced
3.4 Markdown Preview Enhancedの設定
VSCodeの設定から以下の設定を変更します。
| 設定 | 値 |
|---|---|
| Markdown-preview-enhanced: Chrome Path
|
C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe |
| Markdown-preview-enhanced: Enable Extended Table Syntax
|
☑ Enable extended table syntaxto support merging table cells.
|
| Markdown-preview-enhanced: Plantuml Jar Path
|
C:\Users\ユーザー名\.vscode\extensions\jebbs.plantuml-バージョン番号\plantuml.jar |
3.5 VSCode上でのUMLの描画
以下のサンプルコードのプレビューがVSCode上で描画できるか確認します。
サンプルコード
```plantuml
@startuml サンプルコード
skinparam classAttributeIconSize 0
title サンプルクラス
class Encoder{
+ translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```
プレビュー
コマンドパレットから以下を実行すると表示できます。
プレビューが表示できれば動作確認はOK。
- Markdown: Markdown Preview Enhanced: Open Preview to the Side
3.6 PDFで出力する
プレビュー上でマウスを右クリックし、下図の順で選択すると
mdファイルと同じフォルダに同名のpdfファイルが出力されます。
pdfファイルが既に存在する場合は上書きされます。
4. プログラミングフォントMyrica
必須ではありませんが、視認性が良くなるので導入をオススメします。
こちらのサイトが頒布元です。
プログラミングフォント Myrica | Myrica （ミリカ）は、フリーなプログラミング用 TrueType フォントです。
4.1 Myricaのフォントイメージ
4.2 Myricaのインストール
以下よりMyrica.zipをダウンロードします。
https://github.com/tomokuni/Myrica/blob/master/product/Myrica.md
zipを解凍して出てくるMyrica.TTCを右クリックしてインストールします。
4.3 Myricaの設定
VSCodeの設定から以下の設定を変更します。
| 設定 | 値 |
|---|---|
| Editor: Font Family | 'Myrica M' |
| Editor: Font Size | 16 |