1. VSCode+Markdownで技術文書を書く時の構築手順
1.1. VSCodeのインストール
- VSCodeダウンロードサイトから、それぞれのOSにあったインストーラを選択し、ダウンロード・インストールする。
https://code.visualstudio.com/download
1.2. 拡張機能のインストール
1.2.1. Japanese Language Pack For Visual Studio Code(日本語化)
- VSCode／拡張機能(Ctrl+Shift+X)/検索画面から、
Japanese Language Pack For Visual Studio Codeを入力し、インストールする。 - VSCode／コマンドパレット(Ctrl+Shift+P)/Configure Display Languageを選択し、
日本語を選択する。
※VSCodeの再起動を要求されるのでRestartを押下しVSCodeを再起動する。
1.2.2. PlantUML
シンタックスハイライト・インテリセンス入力・ダイアグラムのエクスポートなど基本的な機能を使えるようにします。
- VSCode／拡張機能(Ctrl+Shift+X)/検索画面から、
PlantUMLと入力し、インストールする。
1.2.3. PlantUML Previewer
PlantUMLで書いたテキストを、プレビューするために使用します。
シンタックスハイライト・インテリセンス入力・ダイアグラムのエクスポートなど基本的な機能を使えるようにします。
- VSCode／拡張機能(Ctrl+Shift+X)/検索画面から、
PlantUML Previewerを入力し、インストールする。 - ファイルを作成するには、
.puや、.pumlといった拡張子でファイルを作成する。 - プレビューを表示したい場合は、
Alt+Dを押下すると、プレビューウィンドウに表示できる。
※PlantUMLの記述方式については、割愛します。
1.2.4. Markdown All in One
今回は、目次(TOC(TableOfContents))、セクション番号を自動追加するために、使用します。ほかにも便利な機能はたくさんあるので、入れておきましょう。
- VSCode／拡張機能(Ctrl+Shift+X)/検索画面から、
Markdown All in Oneと入力し、インストールする。-
セクション番号を追加/更新
VSCode／コマンドパレット(Ctrl+Shift+P)/MarkDown All in One:Add/Update section numbersを選択すると、#で定義した見出しに、セクション番号を採番できるようになります。 -
目次(TOC)の作成
VSCode／コマンドパレット(Ctrl+Shift+P)/MarkDown All in One:Add/Create Table of Contentsを選択すると、見出しで定義した箇所を、目次として使用してくれるようになります。 -
目次(TOC)の更新
VSCode／コマンドパレット(Ctrl+Shift+P)/MarkDown All in One:Add/Update Table of Contentsを選択すると、目次を更新してくれます。
ただ、基本的には自動で更新できるので、あまり使用しないとは思います。
-
1.2.5. Markdown Preview Enhanced
Markdownで、PlantUMLをimportした際に、表示できるようにパスを通す。
-
VSCode／コマンドパレット(Ctrl+Shift+P)/
Markdown-preview-enhanced: Plantuml Jar Pathを選択する。 -
選択した項目に、
plantuml.jarの絶対パスを設定する。
※今回は、PlantUMLをインストールした以下パスのものを指定することとします。
%USERPROFILE%\.vscode\extensions\jebbs.plantuml-2.18.1\plantuml.jar
1.3. Markdown→Wordファイル変換用に準備
1.3.1. Pandoc
wordファイルに変換するために使用する。
- ダウンロード・インストール
https://github.com/jgm/pandoc/releases/tag/3.6
- Markdownからwordへ変換する(コマンドラインで実行)
> pandoc input.md -t docx -o output.docx
以上！