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欄にある</>ボタンから、各テーマの見た目を確認できます。

https://shiki.style/themes

トップへ