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

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

 

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

 

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

 

  1. Markdown Preview
  2. Brackets Markdown Preview

 

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

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

 

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

 

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

Bracketsを起動⇨ファイル⇨拡張機能マネージャー

 

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

 

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

 

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

 

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

 

 

拡張機能マネージャーでBrackets Markdown Previewを入力して検索

 

拡張機能マネージャーを開いたら、右上に表示されている「🔎(虫眼鏡)」に「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 Markdown Previewの詳細設定のやり方

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

 

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

 

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

 

Preview(プレビュー画面の基本設定)

  • Markdown Format
    ・Standard Markdown か GitHub-Flavored(GFM) を選択
  • Preview Theme
    ・Clean,Dark,Github,Markdown5,Markdown7,Screen,Serif から選択
  • Background Color
    ・背景色を任意の色にできる(red とか white とか)

 

Highlighting(ハイライト設定)

 

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

  • Activate Markdown Preview on Start
    (マークダウン編集中、プレビュー画面はそのまま)
  • Sync scroll position
    (マークダウン編集中、プレビュー画面も一緒に上下)
  • Character Encoding
    (デフォルトは、utf-8)
  • Open detached preview
    このボタンをクリックでプレビューが別画面に

 

WordPressやはてなブログでもマークダウンの文書をプレビューできるけど…

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

 

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

 

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

 

コメント

タイトルとURLをコピーしました