ファランクス by ponta

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