改动点#

1. 修改配置文件，添加themes，分别设置亮色和暗色的主题方案

export default defineConfig({
    markdown: {
        shikiConfig: {
            themes: { 
                dark: 'github-dark', 
                light: 'github-light', 
            }, 
        }
    },
})

2. 添加样式

<style is:global>
.astro-code {
  background-color: #f6f6f7 !important;
}
html.dark .astro-code span {
  color: var(--shiki-dark) !important;
}
html.dark .astro-code {
  background-color: var(--shiki-dark-bg) !important;
}
html.dark .custom-md code span.line:before {
  color: rgb(255, 255, 255, 0.25);
}
</style>

3. 修改fuwari代码块的部分样式

<style lang="stylus" is:global>
.custom-md

  code
    span.line
      &:before
        content: counter(line)
        counter-increment: line
        direction: rtl
        display: inline-block
        margin-right: 1rem
        width: 1rem
        color: rgba(255, 255, 255, 0.25)
        color: rgba(0, 0, 0, 0.35)

  pre
    background: var(--codeblock-bg) !important
    border-radius: 0.75rem
    padding-left: 1.25rem
    padding-right: 1.25rem

    code
      color: unset
      font-size: 0.875rem
      padding: 0
      background: none

      ::selection
        background: var(--codeblock-selection)

      span.br::selection
        background: var(--codeblock-selection)
    
      
</style>

4. 修改之前改造代码块时增加的样式

<style is:global>
  /* transformerNotationDiff */
  .line.diff.add span {
    background-color: #d5ede6 !important;
  }
  .line.diff.remove span {
    background-color: #ffe0e3 !important;
  }
  .line.diff.add:before {
    content: "+ ";
    color: #18794e;
    opacity: 0.6;
  }
  .line.diff.remove:before {
    content: "- ";
    color: #8a191b;
    opacity: 0.6;
  }

  html.dark .line.diff.add span {
    background-color: #174d2c !important;
  }

  html.dark .line.diff.remove span {
    background-color: #440e11 !important;
  }
  
  html.dark .line.diff.add:before {
    color: #4affa8;
  }
  
  html.dark .line.diff.remove:before {
    color: #ff5e61;
  }

  /* transformerNotationHighlight */
  .line.highlighted span {
    background-color: #00000021;
  }

  /* transformerNotationWordHighlight */
  .highlighted-word {
    background-color: #0000000a;
    border: 1px solid #464b52;
    padding: 1px 3px;
    margin: -1px -2px;
    border-radius: 4px;
  }

  html.dark .line.highlighted span {
    background-color: #3c3f45;
  }
  html.dark .highlighted-word {
    background-color: #4b4d50;
    border: 1px solid #464b52;
    padding: 1px 3px;
    margin: -1px -2px;
    border-radius: 4px;
  }
  /* transformerNotationErrorLevel */
  .line.highlighted.error span {
    background-color: #ffe0e3;
  }
  .line.highlighted.warning span {
    background-color: #ffeedf;
  }
  html.dark .line.highlighted.error span {
    background-color: #440e11;
  }
  html.dark .line.highlighted.warning span {
    background-color: #583410;
  }

  /* remark-code-title */
  .remark-code-title {
    color: black;
    background: #f6f6f7;
    font-weight: normal;
    font-size: medium;
    margin: 0px 0px -35px 0px;
    border-radius: 0.75rem 0.75rem 0rem 0rem;
  }
  html.dark .remark-code-title {
    color: white;
    background: #24292e;
    font-weight: normal;
    font-size: medium;
    margin: 0px 0px -35px 0px;
    border-radius: 0.75rem 0.75rem 0rem 0rem;
  }

  .remark-code-title #filename-with-lang {
    padding: 8px 25px 8px 25px;
    display: flex;
    direction: row;
    justify-content: space-between;
  }
  .remark-code-title #separate-line {
    padding: 8px 0px 3px 0px;
    border-top: 1px solid #e2e2e3;
  }
  html.dark .remark-code-title #separate-line {
    border-top: 1px solid rgb(63, 62, 62);
  }
  .remark-code-title #only-lang {
    padding: 8px 25px 8px 25px;
    display: flex;
    direction: row;
    justify-content: end;
  }

  @media screen and (max-width: 1024px) {
    .remark-code-title {
      font-size: small;
    }
    .remark-code-title #row2 {
      padding: 8px 0px 6px 0px;
    }
  }
</style>