diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index 0e2a62c3..1bd5c35e 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -4,6 +4,8 @@ import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' import { createCssVariablesTheme } from 'shikiji' + +// import { transformerMetaWordHighlight } from 'shikiji-transformers' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' @@ -59,6 +61,9 @@ export default defineConfig({ srcDir: path.resolve(__dirname, '../src'), markdown: { theme: cssVariables, + codeTransformers: [ + // transformerMetaWordHighlight(), + ], config(md) { md.use(ComponentPreviewPlugin) }, diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css index 39c561b8..db40cba3 100644 --- a/apps/www/.vitepress/theme/styles/vp-doc.css +++ b/apps/www/.vitepress/theme/styles/vp-doc.css @@ -3,6 +3,7 @@ --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E"); --vp-code-bg: hsl(var(--muted)); --vp-c-divider: hsl(var(--muted)); + --vp-code-block-color: #fff } @@ -414,7 +415,7 @@ .vp-doc div[class*='language-'].line-numbers-mode { /*rtl:ignore*/ - padding-left: 32px; + padding-left: 0px; } .vp-doc .line-numbers-wrapper { @@ -566,4 +567,12 @@ .vp-external-link-icon::after { content: ''; +} + +.vp-doc [class*=language-] code { + color: var(--vp-code-block-color); +} + +.line-numbers-mode pre code .line { + padding-left: 3rem !important; } \ No newline at end of file diff --git a/apps/www/package.json b/apps/www/package.json index 83ca3d93..cdc17e69 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -19,7 +19,7 @@ "@morev/vue-transitions": "^2.3.6", "@radix-icons/vue": "^1.0.0", "@stackblitz/sdk": "^1.9.0", - "@tanstack/vue-table": "^8.11.6", + "@tanstack/vue-table": "^8.11.7", "@unovis/ts": "^1.3.1", "@unovis/vue": "^1.3.1", "@vee-validate/zod": "^4.12.4", @@ -36,7 +36,7 @@ "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", "vee-validate": "4.12.4", - "vue": "^3.4.14", + "vue": "^3.4.15", "vue-wrap-balancer": "^1.1.3", "zod": "^3.22.4" }, @@ -56,14 +56,15 @@ "lodash.template": "^4.5.0", "pathe": "^1.1.2", "rimraf": "^5.0.5", - "shikiji": "^0.10.0-beta.2", + "shikiji": "^0.10.0-beta.9", + "shikiji-transformers": "^0.10.0-beta.9", "tailwind-merge": "^2.2.0", "tailwindcss": "^3.4.1", "tsx": "^4.7.0", "typescript": "^5.3.3", "unplugin-icons": "^0.17.1", - "vite": "^5.0.11", - "vitepress": "^1.0.0-rc.37", + "vite": "^5.0.12", + "vitepress": "^1.0.0-rc.39", "vue-tsc": "^1.8.27" } } diff --git a/apps/www/src/content/docs/components/carousel.md b/apps/www/src/content/docs/components/carousel.md index 9ca1b11d..7b741e6d 100644 --- a/apps/www/src/content/docs/components/carousel.md +++ b/apps/www/src/content/docs/components/carousel.md @@ -57,7 +57,7 @@ To set the size of the items, you can use the `basis` utility class on the ` @@ -71,7 +71,7 @@ Example Responsive -```vue title="Responsive" showLineNumbers {4-6} +```vue:line-numbers title="Responsive" {4-6} // 50% on small screens and 33% on larger screens. @@ -101,7 +101,7 @@ You can always adjust this in your own project if you need to. Example -```vue showLineNumbers /-ml-4/ /pl-4/ +```vue:line-numbers /-ml-4/ /pl-4/