From 0056a961db8dbf1b321bae03fe39f8f965deb65b Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sun, 22 Sep 2024 10:40:17 +0800 Subject: [PATCH] feat(theme)!: migrate `plugin-markdown-hint` --- docs/2.preview/主题效果预览.md | 8 + pnpm-lock.yaml | 55 +++- theme/package.json | 1 + theme/src/client/styles/custom-block.css | 8 +- theme/src/client/styles/hint-container.css | 310 +++++++++++++++++++++ theme/src/client/styles/index.css | 2 +- theme/src/client/styles/md-enhance.css | 147 ---------- theme/src/client/styles/vars.css | 40 ++- theme/src/node/plugins/getPlugins.ts | 5 +- 9 files changed, 417 insertions(+), 159 deletions(-) create mode 100644 theme/src/client/styles/hint-container.css diff --git a/docs/2.preview/主题效果预览.md b/docs/2.preview/主题效果预览.md index cde5a7c8..aa40bae4 100644 --- a/docs/2.preview/主题效果预览.md +++ b/docs/2.preview/主题效果预览.md @@ -252,6 +252,9 @@ function foo() { } ``` +::: tip 仅标题 +::: + ::: note 注释 注释内容 [link](https://github.com/pengzhanbo) `inline code` @@ -318,6 +321,11 @@ const c = a + b ::: +::: details 详细标题 + +这里是内容。 +::: + **GFM alert：** > [!note] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19914d2a..fdb71325 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -310,6 +310,9 @@ importers: '@vuepress/plugin-markdown-container': specifier: 2.0.0-rc.43 version: 2.0.0-rc.43(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2))) + '@vuepress/plugin-markdown-hint': + specifier: 2.0.0-rc.46 + version: 2.0.0-rc.46(markdown-it@14.1.0)(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2))) '@vuepress/plugin-nprogress': specifier: 2.0.0-rc.46 version: 2.0.0-rc.46(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2))) @@ -412,9 +415,6 @@ packages: peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' - peerDependenciesMeta: - '@algolia/client-search': - optional: true '@algolia/cache-browser-local-storage@4.20.0': resolution: {integrity: sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==} @@ -1112,6 +1112,14 @@ packages: markdown-it: optional: true + '@mdit/plugin-alert@0.13.1': + resolution: {integrity: sha512-3LMYQQ3QP6TUx6zmtmuoHJScST5SVoPZlNuuF4S6PUZvJIwtlITF+eFNjDrA7UQx0PUdCgVHmwu5kYliq+BNtg==} + peerDependencies: + markdown-it: ^14.1.0 + peerDependenciesMeta: + markdown-it: + optional: true + '@mdit/plugin-align@0.12.0': resolution: {integrity: sha512-rvA+xzaVrlsr44s7XD/xadO3lF0QYWCbeSrOS2dhOroNCIOy4RotVP/1tQPr84eqm4oXcxXF0cbjFuwUgE1jYw==} engines: {node: '>= 18'} @@ -1139,6 +1147,15 @@ packages: markdown-it: optional: true + '@mdit/plugin-container@0.13.1': + resolution: {integrity: sha512-mFfm7YViyLHo8uORVa9oLi9+acZZoSVdPf3WPqzC/yLZAJbF27rfJgWZ9Kylt+tyaAYng8L4DiSeVcSNUIHF1A==} + engines: {node: '>= 18'} + peerDependencies: + markdown-it: ^14.1.0 + peerDependenciesMeta: + markdown-it: + optional: true + '@mdit/plugin-demo@0.12.0': resolution: {integrity: sha512-+KDUOgcvnMtBN/uYWlhIFuWkTJexuxstq8ERy9q7vOiu8Go85qCb27h0RSToKBTmmGy+XqfU2EdJclYPWBupJQ==} peerDependencies: @@ -1981,6 +1998,11 @@ packages: peerDependencies: vuepress: 2.0.0-rc.15 + '@vuepress/plugin-markdown-hint@2.0.0-rc.46': + resolution: {integrity: sha512-MOTr8lz/fngoS6B9d1JstPX1xTCzU29Z53BQfmGFJkL5H054qrmRbIqwCi/agOIfbOOPI1KDXdttk7LfLP39dw==} + peerDependencies: + vuepress: 2.0.0-rc.15 + '@vuepress/plugin-nprogress@2.0.0-rc.46': resolution: {integrity: sha512-lSVW3+76ny4etghttPy6PR6At4g8vmrOh47gwXXmNAWoSuB0FPQPIbBggaj2nXpEA7KN2JOPa1QGGMrFuunvbg==} peerDependencies: @@ -5859,9 +5881,8 @@ snapshots: '@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)': dependencies: - algoliasearch: 4.20.0 - optionalDependencies: '@algolia/client-search': 4.20.0 + algoliasearch: 4.20.0 '@algolia/cache-browser-local-storage@4.20.0': dependencies: @@ -6533,6 +6554,12 @@ snapshots: optionalDependencies: markdown-it: 14.1.0 + '@mdit/plugin-alert@0.13.1(markdown-it@14.1.0)': + dependencies: + '@types/markdown-it': 14.1.2 + optionalDependencies: + markdown-it: 14.1.0 + '@mdit/plugin-align@0.12.0(markdown-it@14.1.0)': dependencies: '@mdit/plugin-container': 0.12.0(markdown-it@14.1.0) @@ -6552,6 +6579,12 @@ snapshots: optionalDependencies: markdown-it: 14.1.0 + '@mdit/plugin-container@0.13.1(markdown-it@14.1.0)': + dependencies: + '@types/markdown-it': 14.1.2 + optionalDependencies: + markdown-it: 14.1.0 + '@mdit/plugin-demo@0.12.0(markdown-it@14.1.0)': dependencies: '@types/markdown-it': 14.1.2 @@ -7511,6 +7544,18 @@ snapshots: markdown-it-container: 4.0.0 vuepress: 2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2)) + '@vuepress/plugin-markdown-hint@2.0.0-rc.46(markdown-it@14.1.0)(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2)))': + dependencies: + '@mdit/plugin-alert': 0.13.1(markdown-it@14.1.0) + '@mdit/plugin-container': 0.13.1(markdown-it@14.1.0) + '@types/markdown-it': 14.1.2 + '@vuepress/helper': 2.0.0-rc.46(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2))) + vuepress: 2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2)) + transitivePeerDependencies: + - '@vue/composition-api' + - markdown-it + - typescript + '@vuepress/plugin-nprogress@2.0.0-rc.46(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2)))': dependencies: '@vuepress/helper': 2.0.0-rc.46(typescript@5.6.2)(vuepress@2.0.0-rc.15(@vuepress/bundler-vite@2.0.0-rc.15(@types/node@20.14.8)(jiti@1.21.6)(sass@1.77.8)(tsx@4.16.0)(typescript@5.6.2)(yaml@2.5.0))(typescript@5.6.2)(vue@3.5.7(typescript@5.6.2))) diff --git a/theme/package.json b/theme/package.json index 09e83bc3..c655399e 100644 --- a/theme/package.json +++ b/theme/package.json @@ -89,6 +89,7 @@ "@vuepress/plugin-docsearch": "2.0.0-rc.46", "@vuepress/plugin-git": "2.0.0-rc.44", "@vuepress/plugin-markdown-container": "2.0.0-rc.43", + "@vuepress/plugin-markdown-hint": "2.0.0-rc.46", "@vuepress/plugin-nprogress": "2.0.0-rc.46", "@vuepress/plugin-photo-swipe": "2.0.0-rc.46", "@vuepress/plugin-reading-time": "2.0.0-rc.46", diff --git a/theme/src/client/styles/custom-block.css b/theme/src/client/styles/custom-block.css index cee42bec..09762c03 100644 --- a/theme/src/client/styles/custom-block.css +++ b/theme/src/client/styles/custom-block.css @@ -184,7 +184,7 @@ position: absolute; inset-inline-start: 14px; top: 34px; - bottom: 6px; + bottom: 5px; width: 1px; content: ""; background-color: var(--vp-c-divider); @@ -202,7 +202,11 @@ border-top: none; } +.vp-doc .vp-steps > ol > li > :first-child:where(p) { + line-height: 28px; +} + .vp-doc .vp-steps > ol > li + li, .vp-doc .vp-steps > ul > li + li { - margin-top: 0; + margin-top: 1px; } diff --git a/theme/src/client/styles/hint-container.css b/theme/src/client/styles/hint-container.css new file mode 100644 index 00000000..56524c0d --- /dev/null +++ b/theme/src/client/styles/hint-container.css @@ -0,0 +1,310 @@ +/* stylelint-disable no-descending-specificity */ +.vp-doc .hint-container { + padding: 16px 16px 8px; + margin: 16px auto; + font-size: var(--vp-custom-block-font-size); + line-height: var(--vp-custom-block-line-height); + color: var(--vp-c-text-2); + border: 1px solid transparent; + border-radius: 8px; +} + +.vp-doc .hint-container.info { + color: var(--vp-custom-block-info-text); + background-color: var(--vp-custom-block-info-bg); + border-color: var(--vp-custom-block-info-border); +} + +.vp-doc .hint-container.info a, +.vp-doc .hint-container.info code { + color: var(--vp-c-brand-1); +} + +.vp-doc .hint-container.info a:hover, +.vp-doc .hint-container.info a:hover > code { + color: var(--vp-c-brand-2); +} + +.vp-doc .hint-container.info code { + background-color: var(--vp-custom-block-info-code-bg); +} + +.vp-doc .hint-container.note { + color: var(--vp-custom-block-note-text); + background-color: var(--vp-custom-block-note-bg); + border-color: var(--vp-custom-block-note-border); +} + +.vp-doc .hint-container.note a, +.vp-doc .hint-container.note code { + color: var(--vp-c-brand-1); +} + +.vp-doc .hint-container.note a:hover, +.vp-doc .hint-container.note a:hover > code { + color: var(--vp-c-brand-2); +} + +.vp-doc .hint-container.note code { + background-color: var(--vp-custom-block-note-code-bg); +} + +.vp-doc .hint-container.tip { + color: var(--vp-custom-block-tip-text); + background-color: var(--vp-custom-block-tip-bg); + border-color: var(--vp-custom-block-tip-border); +} + +.vp-doc .hint-container.tip a, +.vp-doc .hint-container.tip code { + color: var(--vp-c-tip-1); +} + +.vp-doc .hint-container.tip a:hover, +.vp-doc .hint-container.tip a:hover > code { + color: var(--vp-c-tip-2); +} + +.vp-doc .hint-container.tip code { + background-color: var(--vp-custom-block-tip-code-bg); +} + +.vp-doc .hint-container.important { + color: var(--vp-custom-block-important-text); + background-color: var(--vp-custom-block-important-bg); + border-color: var(--vp-custom-block-important-border); +} + +.vp-doc .hint-container.important a, +.vp-doc .hint-container.important code { + color: var(--vp-c-important-1); +} + +.vp-doc .hint-container.important a:hover, +.vp-doc .hint-container.important a:hover > code { + color: var(--vp-c-important-2); +} + +.vp-doc .hint-container.important code { + background-color: var(--vp-custom-block-important-code-bg); +} + +.vp-doc .hint-container.warning { + color: var(--vp-custom-block-warning-text); + background-color: var(--vp-custom-block-warning-bg); + border-color: var(--vp-custom-block-warning-border); +} + +.vp-doc .hint-container.warning a, +.vp-doc .hint-container.warning code { + color: var(--vp-c-warning-1); +} + +.vp-doc .hint-container.warning a:hover, +.vp-doc .hint-container.warning a:hover > code { + color: var(--vp-c-warning-2); +} + +.vp-doc .hint-container.warning code { + background-color: var(--vp-custom-block-warning-code-bg); +} + +.vp-doc .hint-container.danger { + color: var(--vp-custom-block-danger-text); + background-color: var(--vp-custom-block-danger-bg); + border-color: var(--vp-custom-block-danger-border); +} + +.vp-doc .hint-container.danger a, +.vp-doc .hint-container.danger code { + color: var(--vp-c-danger-1); +} + +.vp-doc .hint-container.danger a:hover, +.vp-doc .hint-container.danger a:hover > code { + color: var(--vp-c-danger-2); +} + +.vp-doc .hint-container.danger code { + background-color: var(--vp-custom-block-danger-code-bg); +} + +.vp-doc .hint-container.caution { + color: var(--vp-custom-block-caution-text); + background-color: var(--vp-custom-block-caution-bg); + border-color: var(--vp-custom-block-caution-border); +} + +.vp-doc .hint-container.caution a, +.vp-doc .hint-container.caution code { + color: var(--vp-c-caution-1); +} + +.vp-doc .hint-container.caution a:hover, +.vp-doc .hint-container.caution a:hover > code { + color: var(--vp-c-caution-2); +} + +.vp-doc .hint-container.caution code { + background-color: var(--vp-custom-block-caution-code-bg); +} + +.vp-doc .hint-container.details { + color: var(--vp-custom-block-details-text); + background-color: var(--vp-custom-block-details-bg); + border-color: var(--vp-custom-block-details-border); +} + +.vp-doc .hint-container.details a { + color: var(--vp-c-brand-1); +} + +.vp-doc .hint-container.details a:hover, +.vp-doc .hint-container.details a:hover > code { + color: var(--vp-c-brand-2); +} + +.vp-doc .hint-container.details code { + background-color: var(--vp-custom-block-details-code-bg); +} + +.vp-doc .hint-container-title { + font-weight: 600; +} + +.vp-doc .hint-container p + p { + margin: 8px 0; +} + +.vp-doc .hint-container.details summary { + margin: 0 0 8px; + font-weight: 700; + cursor: pointer; + user-select: none; +} + +.vp-doc .hint-container.details summary + p { + margin: 16px 0 8px; +} + +.vp-doc .hint-container a:hover { + opacity: 0.75; +} + +.vp-doc .hint-container code { + font-size: var(--vp-custom-block-code-font-size); +} + +.vp-doc .hint-container.vp-doc .hint-container th, +.vp-doc .hint-container.vp-doc .hint-container blockquote > p { + font-size: var(--vp-custom-block-font-size); + color: inherit; +} + +/* ---------------------------------------- */ + +.vp-doc .hint-container p { + line-height: var(--vp-custom-block-line-height); +} + +.vp-doc .hint-container p + p { + margin: 8px 0; +} + +.vp-doc .hint-container > :not(summary):first-child { + margin-top: 0 !important; +} + +.vp-doc .hint-container > :not(summary):last-child { + margin-bottom: 8px !important; +} + +.vp-doc .hint-container th, +.vp-doc .hint-container blockquote > p { + font-size: var(--vp-custom-block-font-size); + color: inherit; +} + +.vp-doc .hint-container div[class*="language-"] { + margin: 16px 0; +} + +.vp-doc .hint-container .vp-code-tab div[class*="language-"] { + margin: 0 0 8px; +} + +.vp-doc .hint-container div[class*="language-"] code { + font-size: var(--vp-custom-block-code-font-size); + font-weight: 400; + background-color: transparent; +} + +.vp-doc .hint-container div[class*="language-"].line-numbers-mode .line-numbers { + font-size: var(--vp-custom-block-code-font-size); +} + +@media (max-width: 419px) { + .vp-doc .hint-container { + margin: 16px -16px; + } + + .vp-doc .hint-container div[class*="language-"] { + margin: 0.75rem -0.75rem; + } + + .vp-doc .hint-container .vp-code-tabs-nav { + border-radius: 6px 6px 0 0; + } + + .vp-doc .hint-container .vp-code-tab div[class*="language-"] { + margin: 0 -0.75rem; + border-radius: 0 0 6px 6px; + } +} + +.vp-doc .hint-container-title::before { + display: inline-block; + width: 1.25em; + height: 1.25em; + margin-right: 4px; + vertical-align: middle; + content: ""; + background-image: var(--icon); + background-repeat: no-repeat; + background-size: 100%; + transform: translateY(-1px); +} + +@media print { + .vp-doc .hint-container-title::before { + display: none; + } +} + +.vp-doc .hint-container.note .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%235da1a2' d='M9 22c-.6 0-1-.4-1-1v-3H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-6.1l-3.7 3.7c-.2.2-.4.3-.7.3zm1-6v3.1l3.1-3.1H20V4H4v12zm6.3-10l-1.4 3H17v4h-4V8.8L14.3 6zm-6 0L8.9 9H11v4H7V8.8L8.3 6z'/%3E%3C/svg%3E"); +} + +.vp-doc .hint-container.info .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%232196f3'/%3E%3Cpath fill='%23fff' d='M22 22h4v11h-4z'/%3E%3Ccircle cx='24' cy='16.5' r='2.5' fill='%23fff'/%3E%3C/svg%3E"); +} + +.vp-doc .hint-container.tip .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 512 512'%3E%3Cpath fill='%2330a46c' d='M208 464h96v32h-96zm-16-48h128v32H192zM369.42 62.69C339.35 32.58 299.07 16 256 16A159.62 159.62 0 0 0 96 176c0 46.62 17.87 90.23 49 119.64l4.36 4.09C167.37 316.57 192 339.64 192 360v40h48V269.11L195.72 244L214 217.72L256 240l41.29-22.39l19.1 25.68l-44.39 26V400h48v-40c0-19.88 24.36-42.93 42.15-59.77l4.91-4.66C399.08 265 416 223.61 416 176a159.16 159.16 0 0 0-46.58-113.31'/%3E%3C/svg%3E"); +} + +.vp-doc .hint-container.warning .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='%23da8b17' fill-rule='evenodd' d='M6.285 1.975C7.06.68 8.939.68 9.715 1.975l5.993 9.997c.799 1.333-.161 3.028-1.716 3.028H2.008C.453 15-.507 13.305.292 11.972zM8 5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 5m1 6.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0' clip-rule='evenodd'/%3E%3C/svg%3E"); +} + +.vp-doc .hint-container.danger .hint-container-title::before, +.vp-doc .hint-container.caution .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23b62a3c' d='M8.27 3L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3M8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41'/%3E%3C/svg%3E"); + + width: 1.4em; + height: 1.4em; +} + +.vp-doc .hint-container.important .hint-container-title::before { + --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%238e5cd9' d='M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22m0-9q.425 0 .713-.288T13 12V9q0-.425-.288-.712T12 8t-.712.288T11 9v3q0 .425.288.713T12 13m0 3q.425 0 .713-.288T13 15t-.288-.712T12 14t-.712.288T11 15t.288.713T12 16'/%3E%3C/svg%3E"); +} diff --git a/theme/src/client/styles/index.css b/theme/src/client/styles/index.css index c5a6c315..101c356f 100644 --- a/theme/src/client/styles/index.css +++ b/theme/src/client/styles/index.css @@ -9,7 +9,7 @@ @import url("./content.css"); @import url("./code.css"); @import url("./custom-block.css"); - +@import url("./hint-container.css"); @import url("./twoslash.css"); @import url("./md-enhance.css"); @import url("./search.css"); diff --git a/theme/src/client/styles/md-enhance.css b/theme/src/client/styles/md-enhance.css index 544bbb43..38a8fe6d 100644 --- a/theme/src/client/styles/md-enhance.css +++ b/theme/src/client/styles/md-enhance.css @@ -1,152 +1,5 @@ /* stylelint-disable no-descending-specificity */ -/* ------------------ Markdown Enhance: Hint Container ------------------ */ -.vp-doc .hint-container { - padding: 16px; - font-size: var(--vp-custom-block-font-size); - line-height: 24px; - color: var(--vp-c-text-2); - border-radius: 8px; -} - -.vp-doc .hint-container .hint-container-title { - margin-top: 0; - font-weight: 600; -} - -.vp-doc .hint-container p + p { - margin: 8px 0; -} - -.vp-doc .hint-container > :not(summary):first-child { - margin-top: 0 !important; -} - -.vp-doc .hint-container > :last-child { - margin-bottom: 0 !important; -} - -.vp-doc .hint-container th, -.vp-doc .hint-container blockquote > p { - font-size: var(--vp-custom-block-font-size); - color: inherit; -} - -.vp-doc .hint-container div[class*="language-"] { - margin: 16px 0; -} - -.vp-doc .hint-container .vp-code-tab div[class*="language-"] { - margin: 0 0 8px; -} - -.vp-doc .hint-container div[class*="language-"] code { - font-size: var(--vp-custom-block-code-font-size); - font-weight: 400; - background-color: transparent; -} - -.vp-doc .hint-container div[class*="language-"].line-numbers-mode .line-numbers { - font-size: var(--vp-custom-block-code-font-size); -} - -@media (max-width: 419px) { - .vp-doc .hint-container div[class*="language-"] { - margin: 0.85rem -0.75rem; - } - - .vp-doc .hint-container .vp-code-tabs-nav { - border-radius: 6px 6px 0 0; - } - - .vp-doc .hint-container .vp-code-tab div[class*="language-"] { - margin: 0 -0.75rem 0 -1rem; - border-radius: 0 0 6px 6px; - } -} - -.vp-doc .hint-container.note { - color: var(--vp-c-text-3); - border-radius: 0; -} - -.vp-doc .hint-container.info { - color: var(--vp-custom-block-info-text); -} - -.vp-doc .hint-container.tip { - color: var(--vp-custom-block-tip-text); -} - -.vp-doc .hint-container.warning { - color: var(--vp-custom-block-warning-text); -} - -.vp-doc .hint-container.caution { - color: var(--vp-custom-block-danger-text); -} - -.vp-doc .hint-container.details { - color: var(--vp-custom-block-details-text); -} - -.vp-doc .hint-container.details summary { - font-weight: 700; - color: var(--vp-c-text-1); - cursor: pointer; -} - -@media (min-width: 768px) { - .vp-doc .hint-container.details summary { - margin: -16px; - } -} - -.vp-doc .hint-container.note a, -.vp-doc .hint-container.note code, -.vp-doc .hint-container.info a, -.vp-doc .hint-container.info code, -.vp-doc .hint-container.tip a, -.vp-doc .hint-container.tip code, -.vp-doc .hint-container.details a, -.vp-doc .hint-container.details code { - color: var(--vp-c-brand-1); -} - -.vp-doc .hint-container.note a:hover, -.vp-doc .hint-container.info a:hover, -.vp-doc .hint-container.tip a:hover, -.vp-doc .hint-container.details a:hover { - color: var(--vp-c-brand-2); -} - -.vp-doc .hint-container.important a, -.vp-doc .hint-container.important code { - color: var(--vp-c-purple-1); -} - -.vp-doc .hint-container.important a:hover { - color: var(--vp-c-purple-2); -} - -.vp-doc .hint-container.warning a, -.vp-doc .hint-container.warning code { - color: var(--vp-c-warning-1); -} - -.vp-doc .hint-container.warning a:hover { - color: var(--vp-c-warning-2); -} - -.vp-doc .hint-container.caution a, -.vp-doc .hint-container.caution code { - color: var(--vp-c-danger-1); -} - -.vp-doc .hint-container.caution a:hover { - color: var(--vp-c-danger-2); -} - /* ------------------ Markdown Enhance: Code Tabs ----------------------- */ .vp-doc .code-tabs-nav { margin-bottom: 0; diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css index 5cc81261..bdea427e 100644 --- a/theme/src/client/styles/vars.css +++ b/theme/src/client/styles/vars.css @@ -224,6 +224,21 @@ --vp-c-tip-3: var(--vp-c-brand-3); --vp-c-tip-soft: var(--vp-c-brand-soft); + --vp-c-note-1: var(--vp-c-brand-1); + --vp-c-note-2: var(--vp-c-brand-2); + --vp-c-note-3: var(--vp-c-brand-3); + --vp-c-note-soft: var(--vp-c-brand-soft); + + --vp-c-success-1: var(--vp-c-green-1); + --vp-c-success-2: var(--vp-c-green-2); + --vp-c-success-3: var(--vp-c-green-3); + --vp-c-success-soft: var(--vp-c-green-soft); + + --vp-c-important-1: var(--vp-c-purple-1); + --vp-c-important-2: var(--vp-c-purple-2); + --vp-c-important-3: var(--vp-c-purple-3); + --vp-c-important-soft: var(--vp-c-purple-soft); + --vp-c-warning-1: var(--vp-c-yellow-1); --vp-c-warning-2: var(--vp-c-yellow-2); --vp-c-warning-3: var(--vp-c-yellow-3); @@ -233,6 +248,11 @@ --vp-c-danger-2: var(--vp-c-red-2); --vp-c-danger-3: var(--vp-c-red-3); --vp-c-danger-soft: var(--vp-c-red-soft); + + --vp-c-caution-1: var(--vp-c-red-1); + --vp-c-caution-2: var(--vp-c-red-2); + --vp-c-caution-3: var(--vp-c-red-3); + --vp-c-caution-soft: var(--vp-c-red-soft); } /** @@ -418,6 +438,7 @@ * -------------------------------------------------------------------------- */ :root { --vp-custom-block-font-size: 14px; + --vp-custom-block-line-height: 24px; --vp-custom-block-code-font-size: 13px; --vp-custom-block-info-border: transparent; @@ -425,10 +446,20 @@ --vp-custom-block-info-bg: var(--vp-c-default-soft); --vp-custom-block-info-code-bg: var(--vp-c-default-soft); + --vp-custom-block-note-border: transparent; + --vp-custom-block-note-text: var(--vp-c-text-1); + --vp-custom-block-note-bg: var(--vp-c-default-soft); + --vp-custom-block-note-code-bg: var(--vp-c-default-soft); + --vp-custom-block-tip-border: transparent; --vp-custom-block-tip-text: var(--vp-c-text-1); - --vp-custom-block-tip-bg: var(--vp-c-brand-soft); - --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); + --vp-custom-block-tip-bg: var(--vp-c-tip-soft); + --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft); + + --vp-custom-block-important-border: transparent; + --vp-custom-block-important-text: var(--vp-c-text-1); + --vp-custom-block-important-bg: var(--vp-c-important-soft); + --vp-custom-block-important-code-bg: var(--vp-c-important-soft); --vp-custom-block-warning-border: transparent; --vp-custom-block-warning-text: var(--vp-c-text-1); @@ -440,6 +471,11 @@ --vp-custom-block-danger-bg: var(--vp-c-danger-soft); --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft); + --vp-custom-block-caution-border: transparent; + --vp-custom-block-caution-text: var(--vp-c-text-1); + --vp-custom-block-caution-bg: var(--vp-c-caution-soft); + --vp-custom-block-caution-code-bg: var(--vp-c-caution-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/theme/src/node/plugins/getPlugins.ts b/theme/src/node/plugins/getPlugins.ts index 9136ad2b..4afdb656 100644 --- a/theme/src/node/plugins/getPlugins.ts +++ b/theme/src/node/plugins/getPlugins.ts @@ -5,6 +5,7 @@ import { cachePlugin } from '@vuepress/plugin-cache' import { commentPlugin } from '@vuepress/plugin-comment' import { docsearchPlugin } from '@vuepress/plugin-docsearch' import { gitPlugin } from '@vuepress/plugin-git' +import { markdownHintPlugin } from '@vuepress/plugin-markdown-hint' import { nprogressPlugin } from '@vuepress/plugin-nprogress' import { photoSwipePlugin } from '@vuepress/plugin-photo-swipe' import { readingTimePlugin } from '@vuepress/plugin-reading-time' @@ -49,6 +50,7 @@ export function getPlugins({ delay: 200, offset: 5, }), + markdownHintPlugin({ hint: true, alert: true, injectStyles: false }), ...customContainerPlugins, ] @@ -110,13 +112,11 @@ export function getPlugins({ plugins.push(mdEnhancePlugin( Object.assign( { - hint: true, // info note tip warning danger details codetabs: true, tabs: true, align: true, mark: true, tasklist: true, - attrs: true, sup: true, sub: true, alert: true, @@ -124,6 +124,7 @@ export function getPlugins({ katex: true, } as MarkdownEnhancePluginOptions, pluginOptions.markdownEnhance || {}, + { hint: false, alert: false } as MarkdownEnhancePluginOptions, ), )) }