Markdown
Markdown (英語) は、フォーマット要素をプレーンテキストに追加するための軽量のマークアップ言語です。 WebStorm は Markdown ファイルを認識し、ハイライト、補完、フォーマットを行う専用エディターを提供し、レンダリングされた HTML をライブプレビューペインに表示します。 サポートは CommonMark の仕様(英語)に基づいています。
Markdown プラグインを有効にする
この機能は、デフォルトで WebStorm にバンドルされ有効になっている Markdown プラグインに依存しています。 関連機能が利用できない場合は、プラグインが無効になっていないことを確認してください。
Ctrl+Alt+S を押して設定を開き、 を選択します。
インストール済み タブを開き、 Markdown プラグインを見つけて、プラグイン名横のチェックボックスを選択します。
新しい Markdown ファイルを作成する
デフォルトでは、WebStorm は .md または .markdown 拡張子を持つファイルを Markdown ファイルとして認識します。
プロジェクト ツールウィンドウ（Alt+1 ）でディレクトリを右クリックし、 を選択します。
または、必要なディレクトリを選択し、 Alt+Insert を押してから、 ファイル を選択することもできます。
認識された拡張子を持つファイルの名前を入力します（例: readme.md ）。
Markdown エディターは、テキストフラグメント選択時に表示される フローティングツールバーにいくつかの基本的なフォーマットアクションを提供します。 プレビューペインを使用して、レンダリングされた HTML を表示できます。
たとえばソースコードや画像、他の Markdown ファイルへの参照が必要な場合は、現在の project 内のファイルへのリンクの 補完も利用できます。 詳細については、 リンク を参照してください。
コードブロック
フェンスで囲まれたコードブロックを挿入するには、コードブロックの前後にトリプルバッククォート ``` を使用します。 コードブロックの言語を指定すると、デフォルトで、Markdown エディターが 対応する言語を挿入します。
これにより、指定された言語の構文のハイライトとその他のコーディング支援機能が有効になります: 補完、 インスペクション 、および インテンションアクション。
コードブロックのコーディング支援を無効にする
コードブロックが構文的に正しいことを意図していない場合は、コードブロック内のコードインジェクションと構文エラーを無効化すると良いでしょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。
次のオプションをクリアします：
コードフェンス内に言語を挿入
コードフェンス内の問題を表示
変更を適用するには、 OK をクリックします。
Markdown ファイルからコマンドを実行する
プロジェクトのクローンを作成する場合、通常、アプリケーションの実行、環境の構成などを行うための指示とコマンドを含む README.md ファイルがあります。 WebStorm はこれらのコマンドを検出し、コマンド実行用のガターアイコンを提供します。
対応するガターアイコンをクリックするか、キャレットが実行するコマンドにあるときに Ctrl+Shift+F10 を押します。
IDE 設定 Ctrl+Alt+S の で Markdown ファイルのコマンドを実行するためのガターアイコンを無効にすることができます: Markdown ファイルから直接実行できるコマンドを検出 チェックボックスをオフにします。
詳細は、 Markdown 言語設定 を参照してください。
ダイアグラム
Markdown エディターは、 Mermaid(英語) および PlantUML(英語) で定義されたダイアグラムをレンダリングできます。 これはデフォルトで無効になっており、追加の手順が必要です。
Mermaid ダイアグラムのサポートを有効にする
Ctrl+Alt+S を押して設定を開き、 を選択します。
Mermaid(英語) プラグインを見つけてインストールします。
PlantUML ダイアグラムのサポートを有効にする
Ctrl+Alt+S を押して設定を開き、 を選択します。
PlantUML を Markdown 拡張機能 にインストールして有効にします。
WebStorm が関連拡張機能をダウンロードしたら、 OK をクリックして変更を適用します。
HTML プレビュー
デフォルトでは、Markdown エディターには、Markdown ソースの隣にレンダリングされた HTML コードのプレビューペインが表示されます。 Markdown エディターの右上隅にある 
エディター または 
プレビュー をクリックすると、エディターまたはプレビューペインのみを表示できます。
エディターを分割して水平方向にプレビュー
デフォルトでは、エディターとプレビューは縦に分割されて（並んで）表示され、ワイドモニターで便利です。 横に分割して、エディター下部にプレビューを表示することもでき、縦長ディスプレイではより便利です。
Markdown ファイルのあるタブのヘッダーを右クリックし、 スプリットダウンから を選択します。
プレビューのデフォルトのレイアウトを構成するには、 の プレビューのレイアウト リストを使用できます。
エディターを無効にし、スクロールバーの同期をプレビューする
デフォルトでは、エディターとプレビューペインのスクロールバーは同期されています。つまり、プレビューペインの場所はソースの場所に対応しています。
Ctrl+Alt+S を押して設定を開き、 を選択します。
エディターとプレビューでスクロールを同期 をクリアします。
変更を適用するには、 OK をクリックします。
プレビューのフォントサイズを変更する
CSS をカスタマイズすることでプレビューのフォントサイズを定義することもできますが、組み込みのスタイルシートのフォントサイズを設定することもできます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
プレビューのフォントサイズ フィールドでフォントサイズを設定します。
変更を適用するには、 OK をクリックします。
プレビューのフォントサイズを頻繁に調整する必要がある場合は、設定で変更するのではなく、次の 2 つのアクションにショートカットを割り当てます: プレビューフォントサイズの拡大 と プレビューフォントサイズの縮小。
カスタム CSS
WebStorm はプレビューペインで HTML をレンダリングするためのデフォルトスタイルシートを提供します。 これらのスタイルシートはデフォルトの UI テーマと整合するよう設計されています。 特定の CSS ルールを設定して、見た目を細かく調整できます。例えば、見出しのフォントサイズやリスト内の行間などを変更できます。 また、期待される出力により合うように新しい CSS を指定することもできます。例えば、 GitHub Markdown スタイルを再現したい場合などです。
HTML プレビューをレンダリングするための CSS の構成
Ctrl+Alt+S を押して設定を開き、 を選択します。
カスタム CSS で設定を構成します。
指定ファイルからロード を選択して、カスタム CSS ファイルの場所を指定します。
CSS ルール ルールを選択して、オーバーライドする特定の CSS ルールを入力します。
変更を適用するには、 OK をクリックします。
カスタム CSS ルールの例：
イメージ
デフォルトでは、Markdown は画像に次の構文を使用します。これは、project 内のパス補完を利用して入力できます：
画像の挿入
Ctrl+U を押す。
または、 Alt+Insert を押して 挿入… ポップアップを開き、 イメージ を選択します。
画像の挿入 ダイアログでイメージへのパスを指定します。
OK をクリックしてください。
イメージを設定するには、イメージが挿入されている行のガターで 
をクリックします。 例: 画像の挿入 および 画像の構成 ダイアログで HTML に変換 を選択して、生の HTML マークアップを含むイメージを Markdown ファイルに挿入できます。
リンク
次の構文でリンクを定義できます：
リンクを挿入
Ctrl+Shift+U を押す。
または、 Alt+Insert を押して 挿入… ポップアップを開き、 リンク を選択します。
一部のテキストがハイライトされている場合は、リンクのテキストとして [ ] で囲まれます。 URL をクリップボードにコピーした場合は、リンク URL として ( ) で囲まれます。
リンクにカーソルを合わせると、オプションのタイトルが表示されます。
他のファイルやヘッダーへのリンク
URL の他に、現在のファイル内の任意のヘッダーにもリンクを追加できます：
# This is a chapter Link to [this chapter](#this-is-a-chapter)現在のファイルを基準とした他のファイルにもリンクできます：
# This is a chapter Link to [a chapter in another file](another-file.md#some-chapter)
WebStorm は、現在のコンテキストで利用可能なリンクラベル、つまり現在のファイルを基準としたファイルと有効なヘッダーラベルの補完を提供します：
参照されるヘッダーに移動するためのリンクラベルの Ctrl+Click。
ヘッダーまたはラベルで 使用箇所の検索 Alt+F7 を呼び出すと、このラベルを指すすべてのリンクを表示できます。 ヘッダーまたはラベルで 名前を変更 リファクタリング Shift+F6 を呼び出して、関連するすべての使用箇所とともに名前を変更することもできます。
目次の生成
現在のファイルで利用可能なヘッダーの、インデント付きリストを生成できます。
現在のファイルの目次を追加する場所にキャレットを置き、 Alt+Insert を押して 挿入… ポップアップを開きます。
目次 を選択します。
このファイルにすでに目次がある場合は、いくつかのヘッダーを追加、削除、名前変更した後で、 目次の更新 を選択して更新します。
目次は <!-- TOC --> コメントタグで囲まれています。
テーブル
WebStorm は Markdown におけるテーブルの作成と編集をサポートします。
テーブルの挿入
Alt+Insert を押して 挿入… ポップアップを開き、 テーブル を選択します。
テーブルのサイズ（行と列の数）を選択します。
各セルの内容を入力し、 Tab を押してキャレットをあるセルから次のセルに移動します。 新しい行を追加するには、 Shift+Enter を押します。 入力中、WebStorm はテーブルセルの内容に合わせて行と列を自動調整します。
テーブル編集時の支援機能の無効化については、 スマートキー: Markdownを参照してください。
WebStorm はフォーマットが不正なテーブルをハイライトし、修正できるようにします。 リストからクイックフィックスを選択すると、WebStorm はクイックフィックス適用後のプレビューを表示します。
デフォルトでは、WebStorm はエディターにテーブルの列および行マーカーを表示します。 これらのマーカーを使用して、列と行を選択、移動、挿入、削除、整列します。 マーカーは Markdown ファイル特有の特別な インレイヒントです。 これらのマーカーが表示されない場合は、 Ctrl+Alt+S を押して IDE 設定を開き、 に移動して、 オプションをチェックします。
列マーカーをクリックして、次のアクションを実行します：
列を左に移動
列を右に移動
左に列を挿入
右に列を挿入
列のセルを選択
左寄せ
中央寄せ
右寄せ
列を削除
行マーカーをクリックして、次のアクションを実行します：
行を上に移動
行を下に移動
上に行を挿入
下に行を挿入- 行を選択
- 行を削除
数式
Markdown プラグインは、ドキュメントに数式を追加するために TeX および LaTeX 構文をサポートしています。 インライン数式には single dollar 文字 $...$ を、数式ブロックには double dollar 文字 $$...$$ を使用します。
リテラルのドル記号を挿入したい場合は、バックスラッシュでエスケープしてください： \$ または \$$。
フローティングツールバー
Markdown ファイルでテキストを選択すると、WebStorm はさまざまなフォーマットオプションを備えたフローティングツールバーを表示します。 
通常のテキストと、 H1 から H6 までのレベルのヘッダーを切り替えられます。
太字 Ctrl+B
斜体 Ctrl+I
取り消し線 Ctrl+Shift+S
コード Ctrl+Shift+C
リンク作成 Ctrl+Shift+U
箇条書きリスト
番号付きリスト
チェックマークリスト
フローティングツールバーをカスタマイズする
Ctrl+Alt+S を押して設定を開き、 を選択します。
Markdown エディターのフローティングツールバー で必要なアクションを追加または削除します。
詳細は、 メニューとツールバー を参照してください。
変更を適用するには、 OK をクリックします。
フローティングツールバーを非表示にする
Ctrl+Alt+S を押して設定を開き、 を選択します。
Markdown で フローティングツールバーを非表示にする を選択します。
変更を適用するには、 OK をクリックします。
Markdown ファイルを再フォーマットする
WebStorm では、改行や空白行、インデントが適切な Markdown ファイルの 再フォーマットが可能です。
ビルドの実行時、またはその他のアクション時に、VCS コミットで自動的に再フォーマットをトリガーできます。または、いつでも手動で再フォーマットを呼び出すことができます。
メインメニューで、 に移動するか、 Ctrl+Alt+L を押します。
WebStorm は Markdown ファイルの コードスタイル 設定に従って内容をフォーマットします。
Markdown コードスタイル設定を構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
詳細は、 Markdown コードスタイル設定 を参照してください。
Markdown ファイルを変換する
Markdown プラグインは、Markdown ファイルを HTML と PDF にエクスポートできます。 Pandoc(英語) を設定すると、Microsoft Word ファイル（DOCX）へのエクスポートとインポートも可能になります。
Pandoc の構成
WebStorm は Pandoc のインストールを自動的に検出できるはずです。 そうでない場合は、以下を実行します。
メインメニューで へ移動します。
Pandoc 設定 で、Pandoc 実行可能ファイルの場所と、MicrosoftWord ドキュメントからインポートしたイメージを保存する場所を指定します。
変更を適用するには、 OK をクリックします。
MicrosoftWord からインポート
メインメニューで へ移動します。
ドキュメントの場所を指定します。
Markdown ファイルを別の形式にエクスポートする
WebStorm は Microsoft Word（Pandoc が必要 ）、PDF、HTML へのエクスポートが可能です。
エディターとプレビュー または プレビュー をクリックして、エディターに HTML プレビューペインを表示します。メインメニューで へ移動します。
Markdown をエクスポート ダイアログで、出力ファイルの名前、場所、形式を指定して、 OK をクリックします。
生産性のヒント
Markdown のハイライトをカスタマイズする
WebStorm は 配色 設定に従ってさまざまな Markdown 要素をハイライトします。
設定 ダイアログ（Ctrl+Alt+S ）で、 エディター | カラースキーム | Markdown を選択します。
配色を選択してデフォルト継承のハイライト設定を受け入れるか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズします。
大きな Markdown ファイルで移動する
構造 ツールウィンドウ Alt+7 または ファイル構造 ポップアップ Ctrl+F12 を使用して、関連する見出しを表示して移動します。
Markdown ファイルにコメントを追加する
Markdown には、行をコメントアウトするための専用の構文はありません。 ただし、次のように、アドレスのないリンクラベルを使用してコメント行をエミュレートすることは可能です。
コメントアウトする行にキャレットを置き、 Ctrl+/ を押します。
これにより、コメントアウトされたテキストが括弧で囲まれ、必要に応じてその前に空白行が含まれるリンクラベルが追加されます。 コメントを解除するには、同じショートカットを押します。
行を折り返して段落を埋める
デフォルトでは、WebStorm は長い行に自動でハードラップを追加しません。 ファイルを再フォーマットすると行が折り返されます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 入力時に自動改行を有効にするには、 Markdown コードスタイル設定を設定します。
また、設定した最大行長を超える段落を保つために、ハードラップを完全に無効化することもできます。 の 長いテキストの折り返し オプションを無効にしてください。
アクションを使用して、キャレットがある段落にのみ改行を追加することもできます。