Astroでマークダウンの見た目を変える方法
Astroでマークダウンで作られたページを閲覧するとき、ソースコードの箇所はデフォルトではgithub-darkというテーマが使われています。これを変更するにはastro.config.mjsでthemeを指定する必要があります。
astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({
markdown: {
shikiConfig: {
theme: 'dracula',
},
},
});
参考:https://docs.astro.build/ja/guides/markdown-content/
テーマ一覧
利用できるテーマはShikiのサイトに載っています。以下のページのPreview欄にある</>
ボタンから、各テーマの見た目を確認できます。