MarkdownにStyleを適用

更新: 2022-09-30
記事のメインとなるMarkdownにスタイルをあててみました。
こちら(github-markdown-css)を使用してgithubっぽいスタイルにします。

yarn add github-markdown-css

導入は簡単で、このブログの場合、ベースとなるLayoutをラップしてブログコンテンツ用のレイアウトを作成しているため、
以下の様にレイアウトで読み込むだけです。またダークモードには対応していないので、あえてgithub-markdown-light.cssを指定しています。

---
import 'github-markdown-css/github-markdown-light.css';
import Layout from './Layout.astro';

---

シンタックスハイライト

AstroはShikiとPrismをサポートしているようで、デフォルトではShikiが適用されています。
特にPrismに変える必要もなかったのでShikiのテーマを普段から使っているmaterial-darkerに変えて見ました。
その他テーマにもテーマがいくつか用意されているようです。shiki/blob/main/docs/themes.md#loading-theme

export default defineConfig({
	...
	markdown: {
		shikiConfig: {
			theme: 'material-darker',
		},
	},
})

// 例
const hoge = () => console.log('hoge');

参考: シンタックスハイライト - Astro