VSCodeのMarkdown環境を整える　～その3 リアルタイムプレビュー～

はじめに

前回、前々回に引き続き、第三弾のVSCodeのMarkdown環境を整えていきたいと思います。
今回はリアルタイムプレビューについて説明していきたいと思います。

改善したい点は以下になります。

Typoraでは、常時シームレスにプレビューが可能で、ドキュメント作成時に完成イメージをみながら文章を作成できるのがとても便利でした。
なので、VSCodeでも全く同じことが出来ればなーと探してみたけど、完全に一緒のようなものは残念ながらなかったです。。。

仕方ないので妥協しながら似たような環境を作りたいと思います。
具体的には、mdファイルを開いた際に自動でプレビューを横に表示するといったものになります。

VSCode標準のプレビュー機能とMarkdown Preview Enhancedと呼ばれる拡張機能のプレビュー機能を自動表示する2種類の方法について説明します。

拡張機能マーケットプレイスからAuto-Open Markdown Previewと検索してインストールを行います。

インストールして念のためVSCodeを再起動すれば準備完了です！

適当なmdファイルを開くだけで、右側にプレビュー機能が表示されるようになります。もちろん左側で編集した内容は右側でリアルタイムで反映されます。

こちらはMarkdown Preview Enhancedのプレビュー機能を表示するといったものなので前提としてMarkdown Preview Enhancedをインストールします。

Markdown Preview Enhancedについての機能を説明すると本題から逸れてしまうのでまた別の機会に詳細は説明したいと思います。

プレビュー機能だけに限定して簡単に説明すると、アウトライン機能を標準でもっているのでMarkdown Navigationがいまいちであればこちらで代用できそうです。（保存しなくても反映される！！）

ただし、Markdown Preview Enhancedにはmdファイルを開いたときに自動でプレビュー表示するといった機能はありません。なのでそれを実現ができるAuto-Open Markdown Preview Enhancedをインストールします。

2つインストール完了した後に、念のためVSCodeを再起動すれば準備完了です！
同様にmdファイルを開けば右側にMarkdown Preview Enhancedのプレビューが表示されます。(テーマはデフォルト設定から変更しています。)

拡張機能を用いることでリアルタイムプレビュー？のエディター環境を作成できました。
今回は2つの方法を説明しましたが、個人的にはpdf化したりできるMarkdown Preview Enhancedを使用している後者をメインで使っていこうと思います。