visual studio code(vsc) で markdown preview できるようにする
2024/01/22 00:00:00
前提 #
- 環境は windows10 pro
- visual studio code(vsc) はインストール済みであること
- 以下の拡張機能を使用する
- Markdown All in One
- Markdown Table
- Markdown Preview Enhanced
拡張機能インストールと設定 #
vsc を起動し以下の拡張機能をインストールする
Markdown All in One #
拡張機能検索で 「Markdown All in One」 を入力しインストールするだけ。設定等は不要
Markdown Table #
拡張機能検索で 「Markdown Table」 を入力しインストールするだけ。設定等は不要
Markdown Preview Enhanced #
- java(jdk) をインストール
jdk
https://jdk.java.net/21/
Windows/x64 zip: openjdk-21.0.2_windows-x64_bin.zip をダウンロードし、展開後、C:\tools\java\jdk-21.0.2 に配置する
以下の環境設定を追加設定する- 環境変数 JAVA_HOME を追加し C:\tools\java\jdk-21.0.2 を設定
- 環境変数 Path に %JAVA_HOME%\bin を追加
- plantuml をインストールする
PlantUML
https://plantuml.com/ja/download
GPL Compiled jar: plantuml-1.2023.13.jar をダウンロードし、展開後、C:\tools\plantuml\plantuml-1.2023.13.jar に配置する - 拡張機能検索で 「Markdown Preview Enhanced」 を入力しインストール
- plantuml を利用するよう設定する
Ctrl + , で設定検索で plantuml を検索し、C:\tools\plantuml\plantuml-1.2023.13.jar を入力
参考 #
- Markdown Preview Enhanced
https://shd101wyy.github.io/markdown-preview-enhanced/#/ - Markdownの文書にPlantUMLを使ってUMLを埋め込む https://qiita.com/ker38c/items/c51b780aeb6665a8a974
- VS CodeでMarkdownをプレビューするには？
https://atmarkit.itmedia.co.jp/ait/articles/1804/20/news030.html - Plantuml を VSCode で利用する
https://qiita.com/AyumuSuzuki/items/22e2d7ddfe5e8c485839 - 一目でわかるPlantUML(公式?) https://plantuml.com/ja/
- Windows 版 OpenJDK インストール手順
https://qiita.com/ryo-sato/items/87d05021fcc0519e8828 - OpenJDKへの切り替え方法 (Windows環境)
https://support.blancco.com/pages/viewpage.action?pageId=26215477 - Java Extension Pack Auto Config
これ使えば、jdk の手動インストールしなくても対応できるかもしれない。試してない
https://marketplace.visualstudio.com/items?itemName=Pleiades.java-extension-pack-jdk - 開いたファイルの文字エンコードを自動判別するように設定
https://www.javadrive.jp/vscode/setting/index3.html - Visual Studio Codeでソフトウェア設計書(Word文書)を書く環境を作る(環境構築1)
https://yun-craft.com/software-crafts/vscode/03-2 - Markdown Preview Enhanced
https://shd101wyy.github.io/markdown-preview-enhanced/#/