diff --git a/docs/en/guide/markdown.md b/docs/en/guide/markdown.md index 9eb4c0e791f3..c6f6753027b1 100644 --- a/docs/en/guide/markdown.md +++ b/docs/en/guide/markdown.md @@ -149,6 +149,10 @@ This is a warning. This is a dangerous warning. ::: +::: success +This is a success notice. +::: + ::: details This is a details block. ::: @@ -172,6 +176,10 @@ This is a warning. This is a dangerous warning. ::: +::: success +This is a success notice. +::: + ::: details This is a details block. ::: @@ -218,6 +226,7 @@ export default defineConfig({ warningLabel: '警告', dangerLabel: '危险', infoLabel: '信息', + successLabel: '成功', detailsLabel: '详细信息' } } diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css index a960381c695c..bc90c155b3f5 100644 --- a/src/client/theme-default/styles/components/custom-block.css +++ b/src/client/theme-default/styles/components/custom-block.css @@ -166,6 +166,26 @@ background-color: var(--vp-custom-block-details-code-bg); } +.custom-block.success { + border-color: var(--vp-custom-block-success-border); + color: var(--vp-custom-block-success-text); + background-color: var(--vp-custom-block-success-bg); +} + +.custom-block.success a, +.custom-block.success code { + color: var(--vp-c-brand-1); +} + +.custom-block.success a:hover, +.custom-block.success a:hover > code { + color: var(--vp-c-brand-2); +} + +.custom-block.success code { + background-color: var(--vp-custom-block-success-code-bg); +} + .custom-block-title { font-weight: 600; } diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index 8d75d59b9db9..0624fa9ade89 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.css @@ -446,6 +446,11 @@ --vp-custom-block-caution-bg: var(--vp-c-caution-soft); --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft); + --vp-custom-block-success-border: transparent; + --vp-custom-block-success-text: var(--vp-c-text-1); + --vp-custom-block-success-bg: var(--vp-c-success-soft); + --vp-custom-block-success-code-bg: var(--vp-c-success-soft); + --vp-custom-block-details-border: var(--vp-custom-block-info-border); --vp-custom-block-details-text: var(--vp-custom-block-info-text); --vp-custom-block-details-bg: var(--vp-custom-block-info-bg); diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts index bbed26ae85a7..bb113e706d91 100644 --- a/src/node/markdown/plugins/containers.ts +++ b/src/node/markdown/plugins/containers.ts @@ -32,6 +32,13 @@ export const containerPlugin = ( md ) ) + .use( + ...createContainer( + 'success', + containerOptions?.successLabel || 'SUCCESS', + md + ) + ) .use( ...createContainer( 'details', @@ -138,4 +145,5 @@ export interface ContainerOptions { detailsLabel?: string importantLabel?: string cautionLabel?: string + successLabel?: string }