Astro : 初期CSSの修正
list
初期状態で list-style: none; になっている
ol li {
list-style: number;
}
table
テーブルはデフォだと border が無い
table,
th,
td {
border: 1px solid gray;
}
Astro shiki theme
Astroはcodeタグにデフォでastro-code github-dark というクラス名が当たっておりcodeの背景が真っ黒
CSS で上書きしても無効になる
これは shiki というダークテーマを実現するための外部ツール?の影響
astro.config.mjs ファイルにmarkdown部分を追加で記載し、themeを変更することでcodeの背景色を変更できる
import { defineConfig } from 'astro/config';
import vercel from "@astrojs/vercel/serverless";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
output: "server",
adapter: vercel(),
integrations: [tailwind(), react()],
markdown: {
shikiConfig: {
theme: "rose-pine-dawn"
}
}
});
← Go home