AtomでMarkdownを編集しているとき、ソースコードブロックの中の行番号を指定したいことってないでしょうか。文章の中に、「〇〇行目は〜」みたいに書きたいことありますよね。行の左に行番号が振られると参照しやすいのですが、markdown-previewだけでは以下のように行番号が付きません。このフラストレーションを解消するために、行番号をつける方法を調査したので紹介したいと思います。
以下の流れで紹介します。
- パッケージをインストールする
- 行番号を付ける
- 番外篇：ソースコードにハイライトを付けてより見やすくする
パッケージをインストールする
行番号を付けるためのパッケージをインストールします。今回使用するのは、markdown preview enhanceです。
インストール方法はこちらです。CLIとGUIでインストールできますが、今回はGUIからインストールします。
1. Atomの「Preferences…」→ 「install」をクリックする
2. 「markdown-preview-enhanced」を検索し、「Install」ボタンをクリックする
行番号を付ける
インストールしたパッケージを使って行番号をつけていきます。
1. ソースコードブロックの先頭行に{.lines-numbers}を追加する
```{.line-numbers}
ソースコードの内容
```
2. 「Packeges」→「Markdown Preview Enhanced」→「Toggle preview」をクリックする
できました！！凄く見やすくなりました。
番外篇：ソースコードにハイライトを付けてより見やすくする
行番号を付ける中で、ソースコードにハイライトをつける方法が見つかったので紹介します。以下のように先頭行に言語名を記載することで、ハイライトを付けることができます。
```言語名 {.line-numbers}
ソースコードの内容
```
今回紹介したのはyamlなので、```yaml {.line-numbers}と記載すると、以下のようにハイライトが付きます。
以上です！こういうのって意外と調べるのに時間がかかったりするので、参考になれば幸いです。