Bracketsで.mdファイルを開いてプレビューする拡張機能Brackets Markdown Preview

「.md」（マークダウン形式）のファイルを編集する必要ができたので、Bracketsの拡張機能を使いました。

編集だけなら、素のBracketsでできるんですが、プレビューしながら…となると、拡張機能が必要です。

マークダウンをプレビューできる拡張機能はこの2つ。

私は、Brackets Markdown Previewを使いました。

Markdown Previewの方が先にできたマークダウンのプレビュー機能で、Brackets Markdown Previewは、それを元に作られたやつみたい。（なので、きっとこっちの方が便利）

導入方法と使い方を簡単にまとめました。（ほとんど自分のため）

この記事でわかること

Brackets Markdown Previewを拡張機能にインストール

Brackets Markdown Previewを使えば、マークダウン形式のファイルをプレビューしながら編集できます。

Bracketsの拡張機能なので、Bracketsの拡張機能マネージャーを呼び出して、ダウンロードしましょう。

拡張機能マネージャーは、Bracketsのファイルから入ります。

brackets,マークダウン,プレビュー,編集

拡張機能マネージャーを開いたら、右上に表示されている「🔎（虫眼鏡）」に「Markdown Preview」と入力し、検索。

brackets,マークダウン,プレビュー,編集

Markdown PreviewとBrackets Markdown Previewの2種類出てきます。

Markdown Previewの方がリリースが先。Brackets Markdown Previewは、Markdown Previewより2年後のリリース。

詳細説明に書いてありますが、Markdown Previewを参考に作成されたのが、Brackets Markdown Previewです。

どちらをダウンロードしてもいいと思いますが、私は新しい方をダウンロードしました。

brackets,マークダウン,プレビュー,編集

拡張機能の導入が終わったら、マークダウン書類をプレビュー表示させながら編集できます。

Bracketsの右側にある「M＋」をクリックすると、画面の下側にプレビューが表示。

初期設定は、白地に黒文字でプレビューされます。

brackets,マークダウン,プレビュー,編集

プレビュー画面の詳細設定は、プレビュー画面右上にある「⚙（歯車）」ボタンクリックで可能です。

左から設定を説明すると…。

Preview（プレビュー画面の基本設定）

Highlighting（ハイライト設定）

Ext.Behavior（プレビュー画面の別表示設定など）

マークダウンの文書は、はてなブログや、WordPress（の新エディタGutenberg）でもプレビューできます。

でも、コードが混ざった文章をプレビューするには不適。

Brackets Markdown Previewなら、コード混じりの文章でも違和感なくプレビューできるので、便利でした。