VSCodeのMarkdownで改行する方法

VSCode（Visual Studio Code）でMarkdownファイルを編集していると、Enterキーを押して改行したはずなのに、プレビューでは文章が続けて表示されることがあります。

これはVSCodeの不具合ではなく、Markdownの仕様によるものです。

Markdownでは、ソースコード上で行を変えることと、実際の表示上で改行することは必ずしも同じではありません。

VSCodeの標準MarkdownプレビューはCommonMarkの仕様をサポートしているため、改行方法についてもCommonMarkのルールを理解しておくと扱いやすくなります。

主な方法は、次の4つです。

• 空行を入れて段落を分ける
• 行末に半角スペースを2個以上入れる
• 行末にバックスラッシュを入れる
• HTMLの<br>タグを使う

それぞれ用途が異なるため、目的に応じて使い分けることが重要です。

MarkdownでEnterを1回押した場合の扱い

Markdownでは、Enterキーを1回押してソースコード上で改行しても、通常はプレビュー上の明示的な改行にはなりません。

Enterを1回押した例

次のように記述します。

今日は晴れです。
明日は雨です。

エディター上では2行に分かれています。

しかし、Markdownではこの改行は基本的にソフトラインブレークとして扱われます。

そのため、プレビューではおおむね次のように表示されます。

今日は晴れです。 明日は雨です。

つまり、Markdownでは「Enterキーを1回押す＝必ず表示上でも改行される」というわけではありません。

文章を明示的に改行したい場合は、別の記述方法を使用する必要があります。

空行を入れて段落を分ける方法

文章を別の段落として分けたい場合は、文章の間に空行を入れます。

Enterキーを2回押して空行を作る

たとえば、次のように記述します。

今日は晴れです。

明日は雨です。

文章の間に1行の空行があります。

Markdownでは、これは単なる改行ではなく、別々の段落として扱われます。

HTMLに変換した場合のイメージは次のとおりです。

<p>今日は晴れです。</p>
<p>明日は雨です。</p>

通常の文章やREADME、ドキュメントを書く場合は、段落ごとに空行を入れる方法が基本です。

通常の文章では空行を使うのがおすすめ

たとえば、次のような文章の場合です。

VSCodeはMicrosoftが提供しているコードエディターです。

Windows、macOS、Linuxで利用できます。

さまざまな拡張機能を追加できることも特徴です。

このように段落単位で分けておくと、Markdownのソースコードも読みやすくなります。

文章の段落を分けることが目的であれば、<br>を大量に挿入するよりも、空行を使用するほうが自然です。

行末に半角スペースを2個以上入れて改行する方法

同じ段落の中で改行したい場合は、行末に半角スペースを2個以上入れます。

CommonMarkでは、この方法による改行をハードラインブレークとして扱います。

半角スペースを2個入れる例

次のように記述します。

今日は晴れです。  
明日は雨です。

「晴れです。」の後ろには、半角スペースが2個入っています。

プレビューでは次のように表示されます。

今日は晴れです。
明日は雨です。

HTMLに変換すると、イメージとしては次のようになります。

<p>
今日は晴れです。<br>
明日は雨です。
</p>

空行を入れた場合とは異なり、文章自体は同じ段落の中にあります。

半角スペースによる改行は見分けにくい

半角スペースを使った改行には、ソースコードを見ただけでは改行の指定が分かりにくいという欠点があります。

たとえば、

今日は晴れです。  
明日は雨です。

と書かれていても、行末のスペースは画面上ではほとんど確認できません。

そのため、後からMarkdownを編集したときに、

「なぜここだけ改行されているのか」

と分かりにくくなることがあります。

また、VSCodeの設定やフォーマッターによっては、行末の空白が自動的に削除される場合があります。

行末のスペースが削除される場合の対処方法

VSCodeには、ファイル保存時などに行末の不要な空白を削除する設定があります。

この機能が有効になっていると、Markdownの改行目的で入力した半角スペース2個も削除される場合があります。

Markdownだけ行末スペースを残す設定

VSCodeのsettings.jsonで、Markdownファイルだけ行末の空白を削除しないよう設定できます。

{
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

この設定を使用すると、Markdownでは行末のスペースが保持されます。

すべてのファイルで無効にする必要はない

次のように設定することもできます。

{
  "files.trimTrailingWhitespace": false
}

ただし、この場合はMarkdown以外のファイルでも行末の空白が削除されなくなります。

プログラムのソースコードなどでは不要な末尾空白を削除したい場合も多いため、Markdownだけに限定して設定するほうが扱いやすいでしょう。

参考サイト

markdownの改行記法あれこれとVSCodeの便利な設定

行末にバックスラッシュを入れて改行する方法

Markdownでは、行末にバックスラッシュ\を記述して改行する方法もあります。

この方法もCommonMarkではハードラインブレークとして扱われます。

バックスラッシュを使う例

次のように記述します。

今日は晴れです。\
明日は雨です。

プレビューでは、次のように改行されます。

今日は晴れです。
明日は雨です。

バックスラッシュは改行位置が分かりやすい

半角スペースを2個入れる方法とは異なり、バックスラッシュはソースコード上で目に見えます。

たとえば、

東京都新宿区\
○○ビル3階

とすれば、「ここで意図的に改行している」と判断しやすくなります。

Markdownの可読性を重視する場合は、半角スペース2個よりもバックスラッシュを使ったほうが管理しやすいこともあります。

HTMLの<br>タグを使って改行する方法

Markdown内では、HTMLタグを記述できる場合があります。

そのため、HTMLの<br>タグを利用して改行することもできます。

<br>を使う例

次のように記述します。

今日は晴れです。<br>
明日は雨です。

プレビューでは次のように表示されます。

今日は晴れです。
明日は雨です。

<br>は改行位置が分かりやすい

<br>はソースコード上で明確に確認できます。

たとえば、

氏名：山田太郎<br>
住所：東京都新宿区<br>
電話番号：000-0000-0000

のような書き方ができます。

住所やプロフィールなど、1つのまとまりの中で複数行に分けたい場合に便利です。

<br>を使いすぎないほうがよい

<br>は便利ですが、Markdown独自の記法ではなくHTMLタグです。

通常の文章を、

これは1つ目の文章です。<br><br>
これは2つ目の文章です。<br><br>
これは3つ目の文章です。

のように書くよりも、

これは1つ目の文章です。

これは2つ目の文章です。

これは3つ目の文章です。

のように空行で段落を分けたほうが、Markdownとして自然です。

また、Markdownを表示するサービスによってはHTMLタグの扱いが異なることもあります。

そのため、通常の文章ではMarkdown標準の記法を優先し、必要な場所だけ<br>を使うとよいでしょう。

Markdownの改行と段落の違い

Markdownを使ううえでは、「改行」と「段落」の違いを理解しておくことが重要です。

空行を入れた場合は別の段落になる

次のMarkdownがあります。

文章A

文章B

これは別々の段落です。

HTMLに変換すると、おおむね次のようになります。

<p>文章A</p>
<p>文章B</p>

半角スペース2個やバックスラッシュは同じ段落内の改行

一方、次のMarkdownがあります。

文章A  
文章B

これは同じ段落内で改行しています。

HTMLでは、おおむね次のようになります。

<p>文章A<br>
文章B</p>

つまり、

• 空行を入れる：段落を分ける
• 半角スペース2個以上：同じ段落内で改行する
• バックスラッシュ：同じ段落内で改行する
• <br>：HTMLタグで明示的に改行する

という違いがあります。

箇条書きの中で改行する方法

Markdownの箇条書きの中でも、同じリスト項目内で文章を改行できます。

同じ箇条書きの中で改行する

次のように記述します。

- VSCodeはコードエディターです。  
  Microsoftが提供しています。
- Windows、macOS、Linuxで利用できます。

1つ目の箇条書きの中で文章が改行されます。

ただし、内容を別々の項目として扱いたい場合は、それぞれに-を付けたほうが適切です。

- VSCodeはコードエディターです。
- Microsoftが提供しています。
- Windows、macOS、Linuxで利用できます。

文章の意味に応じて使い分けましょう。

Markdownの表のセル内で改行する方法

Markdownの表では、セルの途中で通常の改行を入れると、表の構造が崩れる場合があります。

そのため、表のセル内で改行したい場合には<br>が使われることがあります。

表の中で<br>を使う例

| 項目 | 内容 |
|---|---|
| 対応OS | Windows<br>macOS<br>Linux |
| 用途 | プログラミング<br>文章作成 |

このように記述すると、1つのセル内で複数行に分けて表示できます。

ただし、表内のHTMLタグの扱いはMarkdownレンダラーによって異なる場合があります。

表示先がGitHubなど特定のサービスであれば、最終的な表示も確認しておくと安心です。

VSCodeでMarkdownのプレビューを確認する方法

Markdownの改行が正しく反映されているか確認するには、VSCodeのMarkdownプレビューを使用すると便利です。

Markdownプレビューを開く

デフォルトのキーボードショートカットでは、Windows・Linuxの場合は次のキーを使用します。

Ctrl + Shift + V

macOSの場合は次のキーです。

Shift + Command + V

現在開いているMarkdownファイルのプレビューが表示されます。

Markdownプレビューを横に表示する

エディターとプレビューを並べて確認することもできます。

Windows・Linuxでは、

Ctrl + K
V

macOSでは、

Command + K
V

を使用します。

Markdownを書きながら表示結果を確認できるため、改行や見出し、表などを調整するときに便利です。

なお、ユーザーがキーバインドを変更している場合は、ショートカットが異なることがあります。

Markdownの改行とVSCodeの自動折り返しは別物

Markdownを編集するときに混同しやすいのが、改行とVSCodeの自動折り返しです。

自動折り返しは表示上だけの機能

VSCodeでは、長い行をエディターの幅に合わせて自動的に折り返すことができます。

たとえば、次の文章が1行で記述されているとします。

これは非常に長い文章です。これは非常に長い文章です。これは非常に長い文章です。

VSCodeの画面幅が狭い場合、

これは非常に長い文章です。これは非常に
長い文章です。これは非常に長い文章です。

のように表示されることがあります。

しかし、これはMarkdownに改行が入力されているわけではありません。

あくまでVSCode上で見やすく折り返しているだけです。

自動折り返しはeditor.wordWrapで設定できる

settings.jsonでは、たとえば次のように設定できます。

{
  "editor.wordWrap": "on"
}

この設定を有効にすると、長い行がエディターの横幅に合わせて折り返されます。

Markdownの改行方法とは別の機能なので、区別して覚えておきましょう。

GitHubのREADMEを書く場合の注意点

VSCodeでMarkdownを使用する代表的な用途の1つが、GitHubのREADME.mdです。

ただし、VSCodeのMarkdownプレビューとGitHub上の表示が必ず完全に一致するとは限りません。

VSCodeとGitHubではMarkdownの実装が異なる場合がある

VSCodeの標準MarkdownプレビューはCommonMarkをサポートしています。

一方、GitHubではGitHub Flavored Markdown（GFM）が使用されています。

基本的なMarkdown記法は共通していますが、表や拡張構文などでは表示や機能に違いが出る場合があります。

そのため、GitHubで公開するREADMEなどを作成するときは、

1. VSCodeでMarkdownを書く
2. VSCodeのプレビューで確認する
3. GitHubに反映する
4. GitHub上でも最終表示を確認する

という流れにすると安心です。

VSCodeのMarkdownで改行できないときの確認ポイント

Markdownで期待どおりに改行できない場合は、いくつかのポイントを確認してみましょう。

Enterキーを1回押しただけになっていないか

Enterキー1回による改行は、通常はソフトラインブレークとして扱われます。

プレビュー上で明確に改行したい場合は、半角スペース2個以上やバックスラッシュなどを使用します。

段落を分けたい場合は空行を入れているか

別の段落にしたいのであれば、文章の間に空行を入れます。

文章A

文章B

行末に半角スペースが2個以上あるか

ハードラインブレークにしたい場合は、行末に半角スペースを2個以上入れます。

スペースが1個だけでは、意図した改行にならないため注意しましょう。

行末のスペースが自動削除されていないか

files.trimTrailingWhitespaceが有効になっている場合、Markdownの改行に使用したスペースが削除されることがあります。

必要に応じてMarkdownだけ設定を変更します。

バックスラッシュによる改行を試す

行末スペースが分かりにくい場合は、

文章A\
文章B

のようにバックスラッシュを使用する方法もあります。

VSCodeのプレビューで確認する

ソースコードだけを見て判断せず、Markdownプレビューで実際の表示を確認することも重要です。

VSCodeのMarkdownではどの改行方法を使えばよい？

Markdownでは、目的に応じて改行方法を選ぶのがおすすめです。

普通の文章や段落を分けたい場合

空行を使用します。

これは1つ目の段落です。

これは2つ目の段落です。

文章を書く場合は、この方法を基本にするとよいでしょう。

同じ段落の中で改行したい場合

半角スペース2個以上、またはバックスラッシュを使用します。

東京都新宿区  
○○ビル3階

または、

東京都新宿区\
○○ビル3階

と記述できます。

表など特殊な場所で改行したい場合

<br>を使う方法があります。

Windows<br>macOS<br>Linux

HTMLタグなので多用する必要はありませんが、Markdownだけでは扱いにくいレイアウトで便利です。

まとめ

VSCodeのMarkdownでは、Enterキーを1回押してソースコード上で行を変えても、通常はプレビュー上で明示的な改行として表示されません。

文章を別の段落として分けたい場合は、次のように空行を入れます。

文章A

文章B

同じ段落内で明示的に改行したい場合は、行末に半角スペースを2個以上入れます。

文章A  
文章B

行末のバックスラッシュを使う方法もあります。

文章A\
文章B

また、HTMLの<br>タグを使用することもできます。

文章A<br>
文章B

基本的には、通常の文章では空行を使って段落を分け、同じ段落内で改行したい場合は半角スペース2個以上やバックスラッシュを使うのがおすすめです。

さらに、VSCodeのMarkdownプレビューを使えば、ソースコードを書きながら実際の表示を確認できます。

Markdownの「段落」「ソフトラインブレーク」「ハードラインブレーク」「VSCodeの自動折り返し」の違いを理解しておくと、VSCodeでもMarkdownを扱いやすくなります。

以上、VSCodeのMarkdownで改行する方法についてでした。

最後までお読みいただき、ありがとうございました。