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

#Astro#HowTo#JavaScript#Markdown#Web開発#プログラミング
投稿日:
サムネイル

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をプラグインとして追加します。

Terminal window
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を追加します。

astro.config.mjs
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
});

これにより、Markdown中での改行がそのまま反映されるようになります。

まとめ

remark-breaksは、Markdown文書中で簡単に改行できるようにするremark.jsのプラグインです。従来の改行方法では手間がかかるため、改行を多用する場合には非常に便利です。

remark-breaksを使うには、remark.jsを使っている必要があります。既存のプロジェクトに導入するには、remark-breaksをインストールし、remark.jsの設定にremark-breaksをプラグインとして追加します。

remark-breaksを使うことで、Markdown文書中での改行が直感的になります。これにより、Markdown文書の作成がより快適になります。

Twitterのアイコン LINEのアイコン Threadsのアイコン Misskeyのアイコン Misskeyのアイコン
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。