WebStorm 2024.3 ヘルプ

Markdown

Markdown (英語) は、フォーマット要素をプレーンテキストに追加するための軽量のマークアップ言語です。WebStorm は Markdown ファイルを認識し、ハイライト、補完、フォーマットを行う専用エディターを提供し、レンダリングされた HTML をライブプレビューペインに表示します。サポートは CommonMark の仕様(英語)に基づいています。

Markdown プラグインを有効にする

この機能は、デフォルトで WebStorm にバンドルされて有効になっている Markdown(英語) プラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。

  1. Ctrl+Alt+S を押して設定を開き、プラグインを選択します。

  2. インストール済みタブを開き、Markdown プラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。

新しい Markdown ファイルを作成する

デフォルトでは、WebStorm は、.md または .markdown 拡張子を持つすべてのファイルを Markdown ファイルとして認識します。

  1. プロジェクトツールウィンドウ Alt+1 でディレクトリを右クリックし、新規 | ファイルを選択します。

    または、必要なディレクトリを選択し、Alt+Insert を押してから、ファイルを選択することもできます。

  2. 認識された拡張子を持つファイルの名前を入力します（例: readme.md）。

Markdown エディターは、テキストフラグメントを選択したときに表示されるフローティングツールバーにいくつかの基本的なフォーマットアクションを提供します。プレビューペインを使用して、レンダリングされた HTML を表示できます。

Markdown editor formatting toolbar

たとえば、ソースコード、イメージ、他の Markdown ファイルを参照する必要がある場合、現在のプロジェクト内のファイルへのリンクの補完もあります。詳細については、リンクを参照してください。

Markdown editor completion pop-up

コードブロック

フェンスで囲まれたコードブロックを挿入するには、コードブロックの前後にトリプルバッククォート ``` を使用します。コードブロックの言語を指定すると、デフォルトで、Markdown エディターが対応する言語を挿入します。

Markdown completion in fenced code blocks: select language

これにより、指定された言語の構文のハイライトとその他のコーディング支援機能が有効になります: 補完、インスペクション、およびインテンションアクション。

Markdown completion in fenced code blocks

コードブロックのコーディング支援を無効にする

コードブロックが構文的に正しいことを意図していない場合は、コードブロックのコードインジェクションと構文エラーを無効にすることをお勧めします。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Markdown を選択します。

  2. 次のオプションをクリアします。

    • コードフェンスに言語を注入

    • コードフェンスの問題を表示

  3. 変更を適用するには、OK をクリックします。

Markdown ファイルからコマンドを実行する

プロジェクトのクローンを作成する場合、通常、アプリケーションの実行、環境の構成などを行うための指示とコマンドを含む README.md ファイルがあります。WebStorm はこれらのコマンドを検出し、コマンドを実行するためのガターアイコンを提供します。

  • 対応するガターアイコンをクリックするか、キャレットが実行するコマンドにあるときに Ctrl+Shift+F10 を押します。

    Gutter icons for running commands detected in Markdown files

IDE 設定 Ctrl+Alt+S の言語 & フレームワーク | Markdown で Markdown ファイルのコマンドを実行するためのガターアイコンを無効にすることができます: Markdown ファイルから直接実行できるコマンドを検出チェックボックスをオフにします。

詳細は、Markdown 言語設定を参照してください。

ダイアグラム

Markdown エディターは、Mermaid(英語) および PlantUML(英語) で定義されたダイアグラムをレンダリングできます。これはデフォルトで無効になっており、追加の手順が必要です。

Mermaid diagram in Markdown

Mermaid ダイアグラムのサポートを有効にする

  1. Ctrl+Alt+S を押して設定を開き、プラグインを選択します。

  2. Mermaid(英語) プラグインを見つけてインストールします。

PlantUML ダイアグラムのサポートを有効にする

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Markdown を選択します。

  2. PlantUML を Markdown 拡張機能にインストールして有効にします。

  3. WebStorm が関連する拡張機能をダウンロードしたら、OK をクリックして変更を適用します。

HTML プレビュー

デフォルトでは、Markdown エディターには、Markdown ソースの隣にレンダリングされた HTML コードのプレビューペインが表示されます。Markdown エディターの右上隅にある the Editor button エディターまたは the Preview button プレビューをクリックすると、エディターまたはプレビューペインのみを表示できます。

エディターを分割して水平方向にプレビュー

デフォルトでは、エディターとプレビューは垂直方向 (横に並べて) に分割されているため、ワイドモニターに便利です。水平方向に分割して、エディターの下部にプレビューが表示されるようにすることもできます。これは、縦方向に表示する場合に便利です。

  • Markdown ファイルのあるタブのヘッダーを右クリックし、スプリットダウンからを選択します。

Markdown editor and live preview pane

プレビューのデフォルトのレイアウトを構成するには、言語 & フレームワーク | Markdown のプレビューレイアウトリストを使用できます。

エディターを無効にし、スクロールバーの同期をプレビューする

デフォルトでは、エディターとプレビューペインのスクロールバーは同期されています。つまり、プレビューペインの場所はソースの場所に対応しています。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Markdown を選択します。

  2. エディターでスクロールを同期してプレビューするをクリアします。

  3. 変更を適用するには、OK をクリックします。

プレビューのフォントサイズを変更する

CSS をカスタマイズすることでプレビューのフォントサイズを定義することもできますが、組み込みのスタイルシートのフォントサイズを設定することもできます。

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Markdown を選択します。

  2. プレビューフォントサイズフィールドでフォントサイズを設定します。

  3. 変更を適用するには、OK をクリックします。

プレビューのフォントサイズを頻繁に調整する必要がある場合は、設定で変更するのではなく、次の 2 つのアクションにショートカットを割り当てます: プレビューフォントサイズの拡大とプレビューフォントサイズの縮小。

カスタム CSS

WebStorm は、プレビューペインで HTML をレンダリングするためのデフォルトのスタイルシートを提供します。これらのスタイルシートは、デフォルトの UI テーマと一致するように設計されています。特定の CSS ルールを構成して、小さなプレゼンテーションの変更を行うことができます。たとえば、見出しのフォントサイズを変更したり、リストの行間隔を変更したりできます。または、予想される出力により一致するようにまったく新しい CSS を提供することもできます。たとえば、GitHub Markdown スタイル(英語)を複製する場合などです。

Default Markdown CSS
Markdown preview with a custom CSS that resembles GitHub rendering style

HTML プレビューをレンダリングするための CSS の構成

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Markdown を選択します。

  2. カスタム CSS で設定を構成します。

    • ロード場所を選択して、カスタム CSS ファイルの場所を指定します。

    • CSS ルールルールを選択して、オーバーライドする特定の CSS ルールを入力します。

    Specify custom CSS file

  3. 変更を適用するには、OK をクリックします。

カスタム CSS ルールの例を次に示します。

body { background: #DDDDDD; color: #888888; font-size: 250% !important; } strong { text-decoration: underline; }

イメージ

デフォルトでは、Markdown はイメージに次の構文を使用します。これは、プロジェクト内のパスの補完を使用して入力できます。

![alt-text](path/to/file.png "optional-title")
Inserted image in a Markdown document

画像の挿入

  1. Ctrl+U を押します。

    または、Alt+Insert を押して挿入ポップアップを開き、イメージを選択します。

    Select add image

  2. 画像の挿入ダイアログでイメージへのパスを指定します。

    Markdown: Insert Image dialog

  3. OK をクリックします。

イメージを設定するには、イメージが挿入されている行のガターで The Configure image icon をクリックします。例: 画像の挿入および画像の構成ダイアログで HTML に変換を選択して、生の HTML マークアップを含むイメージを Markdown ファイルに挿入できます。

Insert Image with raw HTML

次の構文でリンクを定義できます。

[link-text](link-url "optional-title")
Insert a link in a Markdown file

  • Ctrl+Shift+U を押します。

    または、Alt+Insert を押して挿入ポップアップを開き、リンクを選択します。

    Insert a link in a Markdown file

一部のテキストがハイライトされている場合は、リンクのテキストとして [ ] で囲まれます。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 を呼び出して、関連するすべての使用箇所とともに名前を変更することもできます。

目次の生成

現在のファイルで使用可能なヘッダーの適切にインデントされたリストを生成できます。

  1. 現在のファイルの目次を追加する場所にキャレットを置き、Alt+Insert を押して挿入ポップアップを開きます。

  2. 目次を選択します。

    Create a table of contents in a Markdown file

    このファイルにすでに目次がある場合は、いくつかのヘッダーを追加、削除、名前変更した後で、目次の更新を選択して更新します。

    Update TOC in a Markdown file

目次は <!-- TOC --> コメントタグで囲まれています。

Table of contents inserted

テーブル

WebStorm は、Markdown でのテーブルの作成と編集をサポートします。

テーブルの挿入

  1. Alt+Insert を押して挿入ポップアップを開き、テーブルを選択します。

    Insert a table in a Markdown file

  2. テーブルのサイズ（行と列の数）を選択します。

  3. 各セルの内容を入力し、Tab を押してキャレットをあるセルから次のセルに移動します。新しい行を追加するには、Shift+Enter を押します。入力すると、WebStorm は行と列を自動的に調整して、表のセルの内容に適切に適合させます。

    テーブル編集時の支援機能の無効化については、「スマートキー: Markdown」を参照してください。

WebStorm は、フォーマットが正しくないテーブルをハイライトし、修正できるようにします。リストからクイックフィックスを選択すると、WebStorm はクイックフィックスの適用結果を示すプレビューを表示します。

Markdown inspection for incorrectly formatted table

デフォルトでは、WebStorm はエディターにテーブルの列と行のマーカーを表示します。これらのマーカーを使用して、列と行を選択、移動、挿入、削除、整列します。マーカーは、Markdown ファイルに固有の特殊なタイプのインレイヒントです。これらのマーカーが表示されない場合は、Ctrl+Alt+S を押して IDE 設定を開き、エディター | インレイヒントに移動して、その他 | Markdown | テーブルインレイオプションをチェックします。

Editing a table in a Markdown file

列マーカーをクリックして、次のアクションを実行します。

  • The Move Column Left button 列を左に移動

  • The Move Column Right button 列を右に移動

  • The Insert Column Left button 列を左に挿入

  • The Insert Column Right button 列を右に挿入

  • The Select Column Cells button 列セルの選択

  • The Align Left button 左揃え

  • The Align Center button 左右中央揃え

  • The Align Right button 右揃え

  • The Remove Column button 列の除去

行マーカーをクリックして、次のアクションを実行します。

  • The Move Row Up button 行を上に移動

  • The Move Row Down button 行を下に移動

  • The Insert Row Above button 行を上に挿入

  • The Insert Row Below button 行を下に挿入

  • The Select Row button 行の選択

  • The Remove Row button 行の除去

数式

Markdown プラグインは、ドキュメントに数式を追加するための TeX および LaTeX 構文をサポートしています。インライン数式を示すには単一のドル記号 $...$ を使用し、数式ブロックを示すには二重ドル記号 $$...$$ を使用します。

Mathematical expressions in Markdown

リテラルドル文字を挿入する場合は、バックスラッシュでエスケープします（\$ または \$$）。

フローティングツールバー

Markdown ファイル内のテキストを選択すると、WebStorm はさまざまなフォーマットオプションを備えたフローティングツールバーを表示します。The Markdown floating toolbar 通常のテキストと、H1 から H6 までのレベルのヘッダーを選択します。

  • Bold 太字 Ctrl+B

  • Italic 斜体 Ctrl+I

  • Strikethrough 取り消し線 Ctrl+Shift+S

  • Code コード Ctrl+Shift+C

  • Create Link リンクの作成 Ctrl+Shift+U

  • Unordered List 順序なしリスト

  • Ordered List 順序付きリスト

  • Checkmark List チェックマークリスト

Markdown toolbar with editing actions

フローティングツールバーをカスタマイズする

  1. Ctrl+Alt+S を押して設定を開き、外観 & 振る舞い | メニューおよびツールバーを選択します。

  2. Markdown エディターのフローティングツールバーで必要なアクションを追加または削除します。

    Customize the Markdown floating toolbar

    詳細は、メニューおよびツールバーを参照してください。

  3. 変更を適用するには、OK をクリックします。

フローティングツールバーを非表示にする

  1. Ctrl+Alt+S を押して設定を開き、詳細設定を選択します。

  2. Markdown でフローティングツールバーの非表示を選択します。

  3. 変更を適用するには、OK をクリックします。

Markdown ファイルを再フォーマットする

WebStorm は、適切な行の折り返し、空白行、インデントを使用して Markdown ファイルを再フォーマットできます。

ビルドの実行時、またはその他のアクション時に、VCS コミットで自動的に再フォーマットをトリガーできます。または、いつでも手動で再フォーマットを呼び出すことができます。

  • メインメニューで、コード | コードの整形に移動するか、Ctrl+Alt+L を押します。

WebStorm は、Markdown ファイルのコードスタイル設定に従ってコンテンツをフォーマットします。

Markdown コードスタイル設定を構成する

  • Ctrl+Alt+S を押して設定を開き、エディター | コードスタイル | Markdown を選択します。

詳細は、Markdown コードスタイル設定を参照してください。

Markdown ファイルを変換する

Markdown プラグインは、Markdown ファイルをそのまま HTML および PDF にエクスポートできます。Pandoc(英語) を構成すると、Microsoft Word ファイル（DOCX）との間でエクスポートおよびインポートすることもできます。

Pandoc の構成

WebStorm は、Pandoc のインストールを自動的に検出できるはずです。そうでない場合は、以下を実行します。

  1. メインメニューで、ツール | Markdown | Pandoc の構成に移動します。

  2. Pandoc 設定で、Pandoc 実行可能ファイルの場所と、MicrosoftWord ドキュメントからインポートしたイメージを保存する場所を指定します。

  3. 変更を適用するには、OK をクリックします。

MicrosoftWord からインポート

  1. メインメニューで、ツール | Markdown | Word 文書のインポートに移動します。

  2. ドキュメントの場所を指定します。

Markdown ファイルを別の形式にエクスポートする

WebStorm は、Microsoft Word（Pandoc が必要）、PDF、HTML にエクスポートできます。

  1. the Editor and Preview button エディターとプレビューまたは the Preview button プレビューをクリックして、エディターに HTML プレビューペインを表示します。

  2. メインメニューで、ツール | Markdown | Markdown のエクスポート先に移動します。

  3. Markdown のエクスポートダイアログで、出力ファイルの名前、場所、形式を指定して、OK をクリックします。

    The Markdown Export dialog

生産性のヒント

Markdown のハイライトをカスタマイズする

WebStorm は、配色設定に従ってさまざまな Markdown 要素をハイライトします。

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | Markdown を選択します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

  • 構造ツールウィンドウ Ctrl+7 またはファイル構造ポップアップ Ctrl+F12 を使用して、関連する見出しを表示して移動します。

Markdown ファイルにコメントを追加する

Markdown には、行をコメントアウトするための専用の構文はありません。ただし、次のように、アドレスのないリンクラベルを使用してコメント行をエミュレートすることは可能です。

[comment]: <> (Your comment text)

  • コメントアウトする行にキャレットを置き、Ctrl+/ を押します。

    これにより、コメントアウトされたテキストが括弧で囲まれ、必要に応じてその前に空白行が含まれるリンクラベルが追加されます。コメントを解除するには、同じショートカットを押します。

行を折り返して段落を埋める

デフォルトでは、WebStorm は長い行にハードラップを自動的に追加しません。ファイルを再フォーマットすると行が折り返されます。

  • Ctrl+Alt+S を押して設定を開き、エディター | コードスタイル | Markdown を選択します。入力時に自動改行を有効にするには、Markdown コードスタイル設定を設定します。

  • あるいは、ハードラップを完全に無効にして、構成された最大行長よりも長い段落を保持します。

  • 編集 | 段落を整形アクションを使用して、キャレットがある段落にのみ改行を追加することもできます。

Liquid Markdown 言語設定

関連ページ：

コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、補完を大幅に改善させることができます。補完はサードパーティのコードのシンボルに対しても機能します。ほとんどの場合、必要なのは、必要なファイルをプロジェクトに追加することだけです。この...

言語インジェクション

言語インジェクションを使用すると、ファイルのメイン言語とは異なるプログラミング言語のコードを操作できます。WebStorm は、HTML、CSS、XML、JSON、RegExp、文字列とテンプレートリテラル内、XML に似た言語のタグと属性内の他のコードフラグメントを編集するための包括的な言語支援を提供します。始める前に：プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで IntelliLang バンドルプラグインが有効になっていることを確認します。一時的に...

コードインスペクション

WebStorm には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ（たとえば、本番コードまたは変更されたファイルでのみ）コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...

Markdown 言語設定

このページを使用して、WebStorm で Markdown サポートを構成します。デフォルトレイアウト Markdown ファイルエディターのデフォルトのレイアウトを選択します。エディターのみ、プレビューペインのみ、その両方を表示します。エディターの右上隅にあるボタンを使用して変更できます。プレビューレイアウトエディターとプレビューペインを分割する方法を選択します: 垂直（並べて）または水平（エディターのプレビュー）。プレビューフォントサイズ HTML プレビューに組み込まれているスタイルシートのフォ...

ユーザーインターフェースのテーマ

インターフェーステーマは、ウィンドウ、ダイアログ、ボタン、ユーザーインターフェースのすべての視覚要素の外観を定義します。デフォルトでは、最初の実行時に変更しない限り、WebStorm はダークテーマを使用します。UI テーマを変更する設定ダイアログで、外観 & 振る舞い | 外観を選択します。あるいは、を押して切り替えリストからテーマを選択します。テーマリストから UI テーマを選択します。ダーク: WebStorm デフォルトのダークテーマ、ライト: WebStorm デフォルトのライトテー...

使用箇所の検索

使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみを検索したり、検索範囲をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所のハイライトの色を設定したり、使用箇所の自動ハイライトを完全に無効にしたりすることもできます。ファイル内の使用箇所を検索するエディターで、検索するシンボルを選択すると、WebStorm はファイル内で見つかったすべての使用箇所を自動的にハイライトします。このハイライ...