diff --git a/astro.config.ts b/astro.config.ts index 9afaa4cdf0..1f46cf6b73 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -10,6 +10,7 @@ import { } from "@shikijs/transformers"; 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({ @@ -20,7 +21,7 @@ export default defineConfig({ }), ], markdown: { - 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" }, diff --git a/package.json b/package.json index d450c288dc..61d243d5c3 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dayjs": "^1.11.13", "lodash.kebabcase": "^4.1.1", "remark-collapse": "^0.1.2", + "remark-github-blockquote-alert": "^2.0.0", "remark-toc": "^9.0.0", "satori": "^0.15.2", "sharp": "^0.34.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e750b310e2..16563a9526 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: remark-collapse: specifier: ^0.1.2 version: 0.1.2 + remark-github-blockquote-alert: + specifier: ^2.0.0 + version: 2.0.0 remark-toc: specifier: ^9.0.0 version: 9.0.0 @@ -2363,6 +2366,10 @@ packages: remark-gfm@4.0.1: resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==} + remark-github-blockquote-alert@2.0.0: + resolution: {integrity: sha512-n05GsATsJJUm9INz6E9bMcjMdJva0iTQXBOgFqm/DqDOlztxkqpwplVOAqt/6MV/FE7G/Wqskgkbq333CJU3kg==} + engines: {node: '>=16'} + remark-parse@11.0.0: resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==} @@ -5405,6 +5412,10 @@ snapshots: transitivePeerDependencies: - supports-color + remark-github-blockquote-alert@2.0.0: + dependencies: + unist-util-visit: 5.0.0 + remark-parse@11.0.0: dependencies: '@types/mdast': 4.0.4 diff --git a/src/data/blog/callouts.md b/src/data/blog/callouts.md new file mode 100644 index 0000000000..29bff3068b --- /dev/null +++ b/src/data/blog/callouts.md @@ -0,0 +1,30 @@ +--- +author: Zoey +pubDatetime: 2025-10-04 +modDatetime: 2025-10-04 +title: Markdown Callout Support +slug: markdown-callout-support +featured: false +draft: false +tags: + - docs +description: + Support Markdown Callouts using remark-github-blockquote-alert +--- + +Using + +> [!NOTE] +> Useful information that users should know, even when skimming content. + +> [!TIP] +> Helpful advice for doing things better or more easily. + +> [!IMPORTANT] +> Key information users need to know to achieve their goal. + +> [!WARNING] +> Urgent info that needs immediate user attention to avoid problems. + +> [!CAUTION] +> Advises about risks or negative outcomes of certain actions. diff --git a/src/styles/global.css b/src/styles/global.css index 447a6d9524..82eebaf65e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -67,3 +67,84 @@ html[data-theme="dark"] { :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 font-medium py-2; + } + .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)); + } +}