AstroのMarkdownで改行したとこにBRタグを入れる
Markdownで改行したところは見た目的にも改行されて欲しい派なので、Astroでもそういうかんじにする。
astro.config.mjsにてMarkdownの設定にremark-breaksと言うRemarkのプラグインを追加してやる。
astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
markdown: {
remarkPlugins: ['remark-breaks'],
extendDefaultPlugins: true,
}
});
extendDefaultPluginsはAstroのデフォルトで適用されているプラグイン(GitHub-flavored MarkdownとSmartypants)もそのまま使うという設定。
それらを外したければこの行を消すか値をfalseにすればよい。
簡単にプラグインが追加できるのはいいですな。
参考: MarkdownとMDXの設定
MDXを使っているとき
上記の書き方だとMDXを含むビルド時に以下のようなエラーが出る。
[MDX] remark-breaks not applied.
To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins
MDXを使う場合は設定の中で文字列を使うのではなく明示的にインポートしてちょうだいと書かれているのでそのようにする。具体的に何をすればいいのか書いてある親切な警告メッセージは神。
import { defineConfig } from 'astro/config';
// https://astro.build/config
import mdx from "@astrojs/mdx";
import remarkBreaks from 'remark-breaks';
// https://astro.build/config
export default defineConfig({
integrations: [mdx()],
markdown: {
remarkPlugins: [remarkBreaks],
extendDefaultPlugins: true
}
});
このように書けばMDXでも改行でBRが入るようになる。
なおMarkdownでは有効にしたいけどMDXでは無効にしたい、逆にMDXでだけ有効にしたいみたいな設定もできる。
具体的には@astrojs/mdxのページを参照。