エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

Markdown Preview Enhancedで簡易なドキュメントを作ろう

非エンジニア向けの簡易的なドキュメントを作成するときのツールとして 日本企業御用達のエクセル、ワードがよく挙がりますが、 見やすく書こうとするとスタイル編集は必須になり、見た目に労力を割かないといけなくなりだんだんと辛くなります。

MarkDownでザクザク書きてぇ…という欲望から 最近使いだしているのがVSCodeの拡張機能「Markdown Preview Enhanced」です。

使い方

VSCodeで拡張機能を検索し、追加すればすぐに使えるようになります。

f:id:tansantktk:20210415193308p:plain

mdファイルを開くとVSCodeのエディタ右上にプレビューのアイコンが追加されますのでクリックすると、mdファイルのプレビューがサイドに表示されます。

f:id:tansantktk:20210415193350p:plain

↓のスクショのMarkDownの内容は当ブログの過去記事から持ってきました。

f:id:tansantktk:20210415193148p:plain

良いところ

MarkDownをリアルタイムにプレビューできる

mdファイルを編集するとプレビュー画面もすぐに反映してくれます。

HTML出力できる

f:id:tansantktk:20210415194333p:plain

プレビュー画面上の右クリックメニューからHTMLを選択すると、mdファイルと同じディレクトリ階層にhtmlファイルを生成してくれます。 スタイル指定まではできない模様。

f:id:tansantktk:20210415195824p:plain

出力後のhtmlにはstyleタグでスタイルがベタ書きされているので、ここを弄れば好みのスタイルに調整はできそう。面倒なので多分私はやらないですが…🤪

f:id:tansantktk:20210415194304p:plain

settings.json"markdown-preview-enhanced.enableScriptExecution": trueの記述を追記すると、 見出しに合わせたサイドメニューも自動で生成してくれるのが嬉しいところ。 左下のハンバーガーアイコンをクリックするとサイドメニューの表示/非表示の切替が可能です。 当はてなブログにもある目次生成機能に近いですね。

PDFやPNGでも出力できちゃう

プレビュー画面上の右クリックメニューにはPDFやPNG出力も用意してくれています。 幅広くニーズに応えられそうです。

デフォルトのスタイルは余計なものが無くすっきりした印象

デフォルトでも割と無難な感じで変な装飾もなく良いと思っています。

元々のファイルはMarkdownなので修正が楽

個人差はあると思いますが、Markdownに慣れているならストレスレスにドキュメントが書けるので効率化できそうです。 1個人でしか使ったことはないですが、複数人が記述する場合もスタイルの統一が図りやすいのではないでしょうか。

gitでバージョン管理しやすい

エクセル等のバイナリはgit管理すると差分の詳細が把握できないのが辛いですが、Markdownならただのテキストファイルを管理する形になりますので、変更の管理がしやすくなります。

git resetですぐに前のバージョンに戻せるのも魅力です。