8000 feat: enhance code block & code group · vuejs/docs@76213fe · GitHub
[go: up one dir, main page]
Skip to content

Commit 76213fe

Browse files
yuyinwsyuyinws
committed
feat: enhance code block & code group
1 parent 9880455 commit 76213fe

File tree

15 files changed

+348
-178
lines changed

15 files changed

+348
-178
lines changed

‎.vitepress/config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import llmstxt from 'vitepress-plugin-llms'
66
import baseConfig from '@vue/theme/config'
77
import { headerPlugin } from './headerMdPlugin'
88
// import { textAdPlugin } from './textAdMdPlugin'
9+
import { groupIconMdPlugin,groupIconVitePlugin } from 'vitepress-plugin-group-icons'
910

1011
const nav: ThemeConfig['nav'] = [
1112
{
@@ -757,6 +758,7 @@ export default defineConfigWithTheme<ThemeConfig>({
757758
theme: 'github-dark',
758759
config(md) {
759760
md.use(headerPlugin)
761+
.use(groupIconMdPlugin)
760762
// .use(textAdPlugin)
761763
}
762764
},
@@ -808,6 +810,12 @@ Vue.js - The Progressive JavaScript Framework
808810
## Table of Contents
809811
810812
{toc}`
813+
}) as Plugin,
814+
groupIconVitePlugin({
815+
customIcon: {
816+
cypress: 'vscode-icons:file-type-cypress',
817+
'testing library': 'logos:testing-library'
818+
}
811819
}) as Plugin
812820
]
813821
}

‎.vitepress/theme/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
import SponsorsAside from './components/SponsorsAside.vue'
1212
import VueSchoolLink from './components/VueSchoolLink.vue'
1313
import Banner from './components/Banner.vue'
14+
import 'vitepress/dist/client/theme-default/styles/components/vp-code-group.css'
15+
import 'virtual:group-icons.css'
1416
// import TextAd from './components/TextAd.vue'
1517

1618
export default Object.assign({}, VPTheme, {

‎.vitepress/theme/styles/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
@import "./inline-demo.css";
55
@import "./utilities.css";
66
@import "./style-guide.css";
7+
@import "./vars.css";

‎.vitepress/theme/styles/vars.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
:root {
2+
--vp-code-tab-active-bar-color: var(--vt-c-green);
3+
--vp-code-tab-active-text-color: var(--vt-c-text-inverse-1);
4+
--vp-code-tab-text-color: var(--vt-c-text-inverse-2);
5+
--vp-code-tab-hover-text-color: var(--vt-c-text-inverse-1);
6+
--vp-code-tab-bg: #292d3ef0;
7+
--vp-code-block-bg: #292d3ef0;
8+
}
9+
10+
.dark {
11+
--vp-code-tab-text-color: var(--vt-c-text-2);
12+
--vp-code-tab-hover-text-color: var(--vt-c-text-1);
13+
--vp-code-tab-active-text-color: var(--vt-c-text-1);
14+
--vp-code-tab-bg: var(--vt-c-black-mute);
15+
--vp-code-block-bg: var(--vt-c-black-mute);
16+
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@types/markdown-it": "^14.1.2",
2424
"@types/node": "^22.7.5",
2525
"typescript": "^5.6.3",
26+
"vitepress-plugin-group-icons": "^1.5.4",
2627
"vitepress-plugin-llms": "^0.0.8",
2728
"vue-tsc": "^2.1.6"
2829
},

0 commit comments

Comments
 (0)
0