AstroPaper主题添加GitHub风格的Markdown警告框

通过 remark-github-blockquote-alert 插件，为 Markdown 内容添加 Note、Tip、Warning 等 GitHub 风格的信息提示框，提升文章的可读性和专业性

Table of contents

效果预览

通过引入 remark-github-blockquote-alert 插件，可以直接在 Markdown 中使用以下语法创建醒目的提示框：

> [!NOTE]
> 用户即使快速浏览内容也应了解的有用信息

> [!TIP]
> 帮助用户更好或更轻松地完成操作的实用建议

> [!IMPORTANT]
> 用户为实现目标而需要了解的关键信息

> [!WARNING]
> 需要用户立即关注以避免问题的紧急信息

> [!CAUTION]
> 关于某些操作可能带来的风险或负面结果的建议

如何实现

只需3步，即可为 AstroPaper 引入这个功能

1.装插件并修改astro.config.ts

安装 remark-github-blockquote-alert 插件，并将其添加到 Astro 配置文件的 remarkPlugins 列表中

import { transformerFileName } from "./src/utils/transformers/fileName";
import { SITE } from "./src/config";
import { remarkAlert } from 'remark-github-blockquote-alert'

// https://astro.build/config
export default defineConfig({
  site: SITE.website,
  integrations: [
    sitemap({
      filter: page => SITE.showArchives || !page.endsWith("/archives"),
    }),
  ],
  markdown: {
    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }]],
    remarkPlugins: [remarkToc, [remarkCollapse, { test: "Table of contents" }], remarkAlert],
    shikiConfig: {
      // For more themes, visit https://shiki.style/themes
      themes: { light: "min-light", dark: "night-owl" },astro.config.ts

2.添加样式到 src/styles/global.css

在全局 CSS 文件中添加对应的样式代码

:target {
  scroll-margin-block: 1rem;
}
@layer components {
  .markdown-alert {
    --color-border-default: #d0d7de;
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #9a6700;
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
  }
  html[data-theme="dark"] .markdown-alert {
    --color-border-default: #30363d;
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
  }
  .markdown-alert {
    border-left: 0.25em solid
      var(--borderColor-default, var(--color-border-default));
    @apply mt-6 mb-4 px-4 text-inherit;
  }
  .markdown-alert p {
    @apply mt-0 mb-0;
  }
  .markdown-alert .markdown-alert-title {
    line-height: 1.5;
    @apply flex items-center py-2 font-medium;
  }
  .markdown-alert .markdown-alert-title svg.octicon {
    @apply mr-2 fill-current;
  }
  .markdown-alert.markdown-alert-note {
    border-left-color: var(
      --borderColor-accent-emphasis,
      var(--color-accent-emphasis)
    );
  }
  .markdown-alert.markdown-alert-note .markdown-alert-title {
    color: var(--color-accent-fg);
    color: var(--fgColor-accent, var(--color-accent-fg));
  }
  .markdown-alert.markdown-alert-tip {
    border-left-color: var(
      --borderColor-success-emphasis,
      var(--color-success-emphasis)
    );
  }
  .markdown-alert.markdown-alert-tip .markdown-alert-title {
    color: var(--color-success-fg);
    color: var(--fgColor-success, var(--color-success-fg));
  }
  .markdown-alert.markdown-alert-important {
    border-left-color: var(
      --borderColor-done-emphasis,
      var(--color-done-emphasis)
    );
  }
  .markdown-alert.markdown-alert-important .markdown-alert-title {
    color: var(--color-done-fg);
    color: var(--fgColor-done, var(--color-done-fg));
  }
  .markdown-alert.markdown-alert-warning {
    border-left-color: var(
      --borderColor-attention-emphasis,
      var(--color-attention-emphasis)
    );
  }
  .markdown-alert.markdown-alert-warning .markdown-alert-title {
    color: var(--color-attention-fg);
    color: var(--fgColor-attention, var(--color-attention-fg));
  }
  .markdown-alert.markdown-alert-caution {
    border-left-color: var(
      --borderColor-danger-emphasis,
      var(--color-danger-emphasis)
    );
  }
  .markdown-alert.markdown-alert-caution .markdown-alert-title {
    color: var(--color-danger-fg);
    color: var(--fgColor-danger, var(--color-danger-fg));
  }
}src/styles/global.css

3.更新 package.json

在 package.json 文件中添加新插件的依赖

  "remark-collapse": "^0.1.2",
  "remark-github-blockquote-alert": "^2.0.0", 
  "remark-toc": "^9.0.0",package.json

添加后，在终端运行 npm install 即可完成安装

参考

1. #580 New Feature: add markdown callout support