diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index c266a4e34..4559db3eb 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,8 +1,9 @@ import type { DefaultTheme } from 'vitepress' import { bundledThemes } from 'shiki' import { defineConfig } from 'vitepress' -import { withMermaid } from 'vitepress-plugin-mermaid' +import { groupIconMdPlugin } from 'vitepress-plugin-group-icons' +import { withMermaid } from 'vitepress-plugin-mermaid' import { version } from '../../package.json' import { transformerColorizedBrackets } from '../../packages/colorized-brackets/src' import { transformerMetaWordHighlight, transformerNotationWordHighlight, transformerRemoveNotationEscape } from '../../packages/transformers/src' @@ -144,6 +145,9 @@ export default withMermaid(defineConfig({ ], // @ts-expect-error Waits for https://github.com/vuejs/vitepress/pull/4507 languages: ['js', 'jsx', 'ts', 'tsx'], + config: (md) => { + md.use(groupIconMdPlugin) + }, }, cleanUrls: true, diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 4b8b404bd..bf1fdb780 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -11,6 +11,7 @@ import '../../../packages/vitepress-twoslash/src/style.css' import 'uno.css' import './style.css' import './transformers.css' +import 'virtual:group-icons.css' // @unocss-include diff --git a/docs/.vitepress/vite.config.ts b/docs/.vitepress/vite.config.ts index 721540f96..1d90e546f 100644 --- a/docs/.vitepress/vite.config.ts +++ b/docs/.vitepress/vite.config.ts @@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite' import Components from 'unplugin-vue-components/vite' import { defineConfig } from 'vite' import Tsconfig from 'vite-tsconfig-paths' +import { groupIconVitePlugin as GroupIconVitePlugin } from 'vitepress-plugin-group-icons' export default defineConfig({ plugins: [ @@ -22,5 +23,10 @@ export default defineConfig({ UnoCSS( fileURLToPath(new URL('./uno.config.ts', import.meta.url)), ), + GroupIconVitePlugin({ + customIcon: { + vitepress: 'https://vitepress.dev/vitepress-logo-mini.svg', + }, + }), ], }) diff --git a/docs/package.json b/docs/package.json index e0eddf198..601955703 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,6 +19,7 @@ "unocss": "catalog:", "unplugin-vue-components": "catalog:", "vitepress": "catalog:", + "vitepress-plugin-group-icons": "catalog:", "vue": "catalog:" } } diff --git a/docs/packages/cli.md b/docs/packages/cli.md index d4652655e..2de4c496f 100644 --- a/docs/packages/cli.md +++ b/docs/packages/cli.md @@ -16,9 +16,27 @@ npx @shikijs/cli README.md You can also install it globally. Command aliases `@shikijs/cli`, `shiki`, `skat` are registered. -```bash +::: code-group + +```sh [npm] npm i -g @shikijs/cli +``` + +```sh [yarn] +yarn global add @shikijs/cli +``` + +```sh [pnpm] +pnpm add -g @shikijs/cli +``` + +```sh [bun] +bun add -g @shikijs/cli +``` + +::: +```sh skat src/index.ts ``` diff --git a/docs/packages/colorized-brackets.md b/docs/packages/colorized-brackets.md index fca353c23..5038d1bed 100644 --- a/docs/packages/colorized-brackets.md +++ b/docs/packages/colorized-brackets.md @@ -10,10 +10,26 @@ VSCode-style colorized brackets transformer for Shiki. ## Install -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/colorized-brackets ``` +```sh [yarn] +yarn add -D @shikijs/colorized-brackets +``` + +```sh [pnpm] +pnpm add -D @shikijs/colorized-brackets +``` + +```sh [bun] +bun add -D @shikijs/colorized-brackets +``` + +::: + ## Usage Add to your Shiki transformers: diff --git a/docs/packages/markdown-it.md b/docs/packages/markdown-it.md index 6ea9b223b..c40ca2e7e 100644 --- a/docs/packages/markdown-it.md +++ b/docs/packages/markdown-it.md @@ -6,10 +6,26 @@ ## Install -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/markdown-it ``` +```sh [yarn] +yarn add -D @shikijs/markdown-it +``` + +```sh [pnpm] +pnpm add -D @shikijs/markdown-it +``` + +```sh [bun] +bun add -D @shikijs/markdown-it +``` + +::: + ## Usage ```ts twoslash diff --git a/docs/packages/monaco.md b/docs/packages/monaco.md index ed8b56217..0b9798eb6 100644 --- a/docs/packages/monaco.md +++ b/docs/packages/monaco.md @@ -10,10 +10,26 @@ Heavily inspired by [`monaco-editor-textmate`](https://github.com/zikaari/monaco ## Install -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/monaco ``` +```sh [yarn] +yarn add -D @shikijs/monaco +``` + +```sh [pnpm] +pnpm add -D @shikijs/monaco +``` + +```sh [bun] +bun add -D @shikijs/monaco +``` + +::: + ```ts import { shikiToMonaco } from '@shikijs/monaco' import * as monaco from 'monaco-editor-core' diff --git a/docs/packages/rehype.md b/docs/packages/rehype.md index a3d7c9bf4..1468bffcb 100644 --- a/docs/packages/rehype.md +++ b/docs/packages/rehype.md @@ -10,10 +10,26 @@ outline: deep ## Install -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/rehype ``` +```sh [yarn] +yarn add -D @shikijs/rehype +``` + +```sh [pnpm] +pnpm add -D @shikijs/rehype +``` + +```sh [bun] +bun add -D @shikijs/rehype +``` + +::: + ## Usage ```ts twoslash diff --git a/docs/packages/transformers.md b/docs/packages/transformers.md index 151ff589a..48ab74792 100644 --- a/docs/packages/transformers.md +++ b/docs/packages/transformers.md @@ -10,10 +10,26 @@ Common transformers for Shiki, inspired by [shiki-processor](https://github.com/ ## Install -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/transformers ``` +```sh [yarn] +yarn add -D @shikijs/transformers +``` + +```sh [pnpm] +pnpm add -D @shikijs/transformers +``` + +```sh [bun] +bun add -D @shikijs/transformers +``` + +::: + ## Usage ```ts twoslash diff --git a/docs/packages/twoslash.md b/docs/packages/twoslash.md index c5507ea48..215f58088 100644 --- a/docs/packages/twoslash.md +++ b/docs/packages/twoslash.md @@ -12,10 +12,26 @@ A Shiki transformer for [Twoslash](https://github.com/twoslashes/twoslash), prov ## Install -```bash -npm i -D @shikijs/twoslash +::: code-group + +```sh [npm] +npm install -D @shikijs/twoslash +``` + +```sh [yarn] +yarn add -D @shikijs/twoslash +``` + +```sh [pnpm] +pnpm add -D @shikijs/twoslash ``` +```sh [bun] +bun add -D @shikijs/twoslash +``` + +::: + This package is **a transformer addon** to Shiki. This means that for every integration that supports passing Shiki transformers, you can use this package. ```ts twoslash diff --git a/docs/packages/vitepress.md b/docs/packages/vitepress.md index 918458af0..12468d4c9 100644 --- a/docs/packages/vitepress.md +++ b/docs/packages/vitepress.md @@ -16,14 +16,29 @@ To enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets ### Setup -```bash +::: code-group + +```sh [npm] npm i -D @shikijs/vitepress-twoslash ``` +```sh [yarn] +yarn add -D @shikijs/vitepress-twoslash +``` + +```sh [pnpm] +pnpm add -D @shikijs/vitepress-twoslash +``` + +```sh [bun] +bun add -D @shikijs/vitepress-twoslash +``` + +::: + In your [`.vitepress/config.ts`](https://vitepress.dev/reference/site-config): -```ts -// .vitepress/config.ts +```ts [.vitepress/config.ts] import { transformerTwoslash } from '@shikijs/vitepress-twoslash' // [!code hl] import { defineConfig } from 'vitepress' @@ -41,9 +56,8 @@ export default defineConfig({ And then in your [`.vitepress/theme/index.ts`](https://vitepress.dev/guide/custom-theme), install the Vue plugin and import the css with `@shikijs/vitepress-twoslash/styles.css`. -```ts twoslash +```ts twoslash [.vitepress/theme/index.ts] // @noErrors: true -// .vitepress/theme/index.ts import type { EnhanceAppContext } from 'vitepress' // [!code hl] import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' import Theme from 'vitepress/theme' @@ -127,8 +141,7 @@ To speed up the build process, you can enable the file system cache for the gene In your [`.vitepress/config.ts`](https://vitepress.dev/reference/site-config): -```ts -// .vitepress/config.ts +```ts [.vitepress/config.ts] import { transformerTwoslash } from '@shikijs/vitepress-twoslash' import { createFileSystemTypesCache } from '@shikijs/vitepress-twoslash/cache-fs' // [!code hl] import { defineConfig } from 'vitepress' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 14e9f77d9..1ff8b4779 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -228,6 +228,9 @@ catalogs: vitepress: specifier: ^1.6.2 version: 1.6.2 + vitepress-plugin-group-icons: + specifier: ^1.3.5 + version: 1.3.5 vitepress-plugin-mermaid: specifier: ^2.0.17 version: 2.0.17 @@ -481,6 +484,9 @@ importers: vitepress: specifier: 'catalog:' version: 1.6.2(@algolia/client-search@5.17.1)(@types/node@22.10.7)(fuse.js@7.0.0)(jiti@2.4.2)(postcss@8.4.49)(search-insights@2.17.1)(terser@5.32.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.6.1) + vitepress-plugin-group-icons: + specifier: 'catalog:' + version: 1.3.5 vue: specifier: 'catalog:' version: 3.5.13(typescript@5.7.3) @@ -1652,6 +1658,9 @@ packages: '@iconify-json/codicon@1.2.8': resolution: {integrity: sha512-JTNIQj1zmLgTiCNPr+4d2IBpwJkskRGq8UBxtgfQ3pIUd/suto128Omc75GJy2q/nCrrgA8d8RaMvRbU1DijRA==} + '@iconify-json/logos@1.2.4': + resolution: {integrity: sha512-XC4If5D/hbaZvUkTV8iaZuGlQCyG6CNOlaAaJaGa13V5QMYwYjgtKk3vPP8wz3wtTVNVEVk3LRx1fOJz+YnSMw==} + '@iconify-json/ph@1.2.2': resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==} @@ -1661,6 +1670,9 @@ packages: '@iconify-json/svg-spinners@1.2.2': resolution: {integrity: sha512-DIErwfBWWzLfmAG2oQnbUOSqZhDxlXvr8941itMCrxQoMB0Hiv8Ww6Bln/zIgxwjDvSem2dKJtap+yKKwsB/2A==} + '@iconify-json/vscode-icons@1.2.10': + resolution: {integrity: sha512-qjp/j2RcHEZkesuAT6RP8BfcuHa+oERr7K1twfsulrIHrKZlpxxBeEyFm+3evZSAOgD+sjgU5CuTYS3RfCL+Pg==} + '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} @@ -5160,6 +5172,9 @@ packages: yaml: optional: true + vitepress-plugin-group-icons@1.3.5: + resolution: {integrity: sha512-1f1NP7osRYlNTR0yS5CAqcaasKHRSAzFKpeCUOfCPwYLAFxhCxsEbRtPBm0U1CfrDVa303MsjX18ngGpFGxIMA==} + vitepress-plugin-mermaid@2.0.17: resolution: {integrity: sha512-IUzYpwf61GC6k0XzfmAmNrLvMi9TRrVRMsUyCA8KNXhg/mQ1VqWnO0/tBVPiX5UoKF1mDUwqn5QV4qAJl6JnUg==} peerDependencies: @@ -5284,6 +5299,7 @@ packages: wrangler@3.104.0: resolution: {integrity: sha512-txxgkKZwPQrX1PDgY+ATWnnx4GSeNxUrnBumudWPRmXG0JdLzCf09R+723slMMT1m+CKQXU1KvuUHc/GxTnTyA==} engines: {node: '>=16.17.0'} + deprecated: Downgrade to 3.103.2 hasBin: true peerDependencies: '@cloudflare/workers-types': ^4.20241230.0 @@ -6038,6 +6054,10 @@ snapshots: dependencies: '@iconify/types': 2.0.0 + '@iconify-json/logos@1.2.4': + dependencies: + '@iconify/types': 2.0.0 + '@iconify-json/ph@1.2.2': dependencies: '@iconify/types': 2.0.0 @@ -6050,6 +6070,10 @@ snapshots: dependencies: '@iconify/types': 2.0.0 + '@iconify-json/vscode-icons@1.2.10': + dependencies: + '@iconify/types': 2.0.0 + '@iconify/types@2.0.0': {} '@iconify/utils@2.2.1': @@ -10253,6 +10277,14 @@ snapshots: tsx: 4.19.2 yaml: 2.6.1 + vitepress-plugin-group-icons@1.3.5: + dependencies: + '@iconify-json/logos': 1.2.4 + '@iconify-json/vscode-icons': 1.2.10 + '@iconify/utils': 2.2.1 + transitivePeerDependencies: + - supports-color + vitepress-plugin-mermaid@2.0.17(mermaid@10.9.1)(vitepress@1.6.2(@algolia/client-search@5.17.1)(@types/node@22.10.7)(fuse.js@7.0.0)(jiti@2.4.2)(postcss@8.4.49)(search-insights@2.17.1)(terser@5.32.0)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.6.1)): dependencies: mermaid: 10.9.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 16ebde6f4..d27479cb8 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -88,6 +88,7 @@ catalog: vite-tsconfig-paths: ^5.1.4 vitepress: ^1.6.2 vitepress-plugin-mermaid: ^2.0.17 + vitepress-plugin-group-icons: ^1.3.5 vitest: ^3.0.3 vscode-oniguruma: 1.7.0 vue: ^3.5.13