Markdownで簡単改行！remark-breaksプラグインの使い方

#Astro #HowTo #JavaScript #Markdown #Web開発 #プログラミング

投稿日： 2024年03月20日 16:38

Markdownで（改段落ではなく）改行するには、行末に半角スペースを2つ入れるか、<br/>タグを使用する必要があり、煩わしさを感じさせます。

remark-breaksは、このような問題を解決する、remark.jsのプラグインです。remark.jsの公式のプラグインとして提供されており、remark.jsを使っているプロジェクトであれば、簡単に導入できます。

なぜremark-breaksが必要なのか？

Markdownで文書を作成しているときは、改行ではなく改段落を用いることが多いですが、改行を手軽に使いたいときもあります。たとえば、ブログの文章では、人によっては改行を多用することがあります。

そのような場合、従来の改行方法では非常に手間がかかります。Markdownでは、段落を変えるためには空行を挿入しますが、行内での改行（改段落ではない）をするには、行末に半角スペース2つを追加するか、<br/>タグを用いる必要があります。

また、コードフォーマッターは、しばしば行末のスペースを削除してしまいます。これによって、意図的に挿入した改行が消えてしまうという問題も存在します。

remark-breaksプラグインを使用すると、改行したい場所で単純にエンターキーを押すだけで、自然な改行がMarkdown文書に反映されるようになります。Word文書のように直感的に改行できるようになるため、Markdownで改行を多用する場合は非常に便利です。

remark-breaksの導入方法

remark-breaksを使うには、Markdownパーサーとしてremark.jsを使っている必要があります。remark.jsは、Markdown文書を解析し、変換するためのJavaScriptライブラリです。

既存のプロジェクトに導入するにはまず、remark-breaksをインストールします。次に、remark.jsの設定にremark-breaksをプラグインとして追加します。

npm install remark-breaks

1
import rehypeStringify from "rehype-stringify";
2
import remarkBreaks from "remark-breaks";
3
import remarkParse from "remark-parse";
4
import remarkRehype from "remark-rehype";
5
import { unified } from "unified";
6

7
const markdown = `
8
# Hello, world!
9

10
This is a paragraph.
11
This is another paragraph.
12
`.trim();
13

14
const result = await unified()
15
    .use(remarkParse)
16
    .use(remarkBreaks)
17
    .use(remarkRehype)
18
    .use(rehypeStringify)
19
    .process(markdown);
20

21
console.log(result.toString());

Astroを使っている場合は、astro.config.mjsにremark-breaksを追加します。

1
import { defineConfig } from "astro/config";
2
import remarkBreaks from "remark-breaks";
3

4
// https://astro.build/config
5
export default defineConfig({
6
    site: "https://example.com",
7
    integrations: [
8
        // ...
9
    ],
10
    markdown: {
11
        remarkPlugins: [
12
            remarkBreaks
13
        ],
14
        rehypePlugins: [
15
            // ...
16
        ]
17
    }
18
});