diff --git a/docs/guide/bundles.md b/docs/guide/bundles.md index e5da78d6..b048473e 100644 --- a/docs/guide/bundles.md +++ b/docs/guide/bundles.md @@ -44,24 +44,24 @@ When importing `shiki`, all the themes and languages are bundled as async chunks ```ts twoslash // @noErrors +// directly import the theme and language modules, only the ones you imported will be bundled. +import nord from '@shikijs/themes/nord' + // `shiki/core` entry does not include any themes or languages or the wasm binary. import { createHighlighterCore } from 'shiki/core' import { createOnigurumaEngine } from 'shiki/engine/oniguruma' -// directly import the theme and language modules, only the ones you imported will be bundled. -import nord from 'shiki/themes/nord.mjs' - const highlighter = await createHighlighterCore({ themes: [ // instead of strings, you need to pass the imported module nord, // or a dynamic import if you want to do chunk splitting - import('shiki/themes/material-theme-ocean.mjs') + import('@shikijs/themes/material-theme-ocean') ], langs: [ - import('shiki/langs/javascript.mjs'), + import('@shikijs/langs/javascript'), // shiki will try to interop the module with the default export - () => import('shiki/langs/css.mjs'), + () => import('@shikijs/langs/css'), // or a getter that returns custom grammar async () => JSON.parse(await fs.readFile('my-grammar.json', 'utf-8')) ], @@ -70,7 +70,7 @@ const highlighter = await createHighlighterCore({ }) // optionally, load themes and languages after creation -await highlighter.loadTheme(import('shiki/themes/vitesse-light.mjs')) +await highlighter.loadTheme(import('@shikijs/themes/vitesse-light')) const code = highlighter.codeToHtml('const a = 1', { lang: 'javascript', diff --git a/docs/guide/install.md b/docs/guide/install.md index dc666f0d..5ab0a3c2 100644 --- a/docs/guide/install.md +++ b/docs/guide/install.md @@ -233,7 +233,7 @@ To use `shiki` in the browser via CDN, you can use [esm.run](https://esm.run) or ``` -It's quite efficient as it will only load the languages and themes on demand. For the code snippet above, only four requests will be fired (`shiki`, `shiki/themes/vitesse-light.mjs`, `shiki/langs/javascript.mjs`, `shiki/wasm.mjs`), with around 200KB data transferred in total. +It's quite efficient as it will only load the languages and themes on demand. For the code snippet above, only four requests will be fired (`shiki`, `@shikijs/themes/vitesse-light`, `@shikijs/langs/javascript`, `shiki/wasm.mjs`), with around 200KB data transferred in total. [Demo](https://jsfiddle.net/t7brz23v/) @@ -245,9 +245,9 @@ Meanwhile, it's also recommended to use the [Fine-grained Bundle](#fine-grained- ```ts twoslash theme:nord // @noErrors +import js from '@shikijs/langs/javascript' +import nord from '@shikijs/themes/nord' import { createHighlighterCore, loadWasm } from 'shiki/core' -import js from 'shiki/langs/javascript.mjs' -import nord from 'shiki/themes/nord.mjs' // import wasm as assets await loadWasm(import('shiki/onig.wasm')) diff --git a/docs/guide/migrate.md b/docs/guide/migrate.md index fa391d23..b5fa9c41 100644 --- a/docs/guide/migrate.md +++ b/docs/guide/migrate.md @@ -26,7 +26,7 @@ Breaking changes that you need to migrate manually: Breaking changes applies to main package `shiki`, but are shimmed by the [compatible build `@shikijs/compat`](/guide/compat#compatibility-build): - Top-level named exports `setCDN`, `loadLanguage`, `loadTheme`, `setWasm` are dropped as they are not needed anymore. -- `BUNDLED_LANGUAGES`, `BUNDLED_THEMES` are moved to `shiki/langs` and `shiki/themes` and renamed to `bundledLanguages` and `bundledThemes` respectively. +- `BUNDLED_LANGUAGES`, `BUNDLED_THEMES` are moved to `@shikijs/langs` and `@shikijs/themes` and renamed to `bundledLanguages` and `bundledThemes` respectively. - `theme` option for `createHighlighter` is dropped, use `themes` with an array instead. - Highlighter does not maintain an internal default theme context. `theme` option is required for `codeToHtml` and `codeToTokens`. - `codeToThemedTokens` is renamed to `codeToTokensBase`, a higher level `codeToTokens` is added. diff --git a/docs/guide/sync-usage.md b/docs/guide/sync-usage.md index 635c918e..17661a47 100644 --- a/docs/guide/sync-usage.md +++ b/docs/guide/sync-usage.md @@ -5,10 +5,10 @@ The `await createHighlighter()` and `highlighter.codeToHtml()` are already the e In some extreme cases that you need to run Shiki completely synchronously, since v1.16, we provide a synchronous version of the core API. You can use `createHighlighterCoreSync` to create a highlighter instance synchronously. ```ts +import js from '@shikijs/langs/javascript' +import nord from '@shikijs/themes/nord' import { createHighlighterCoreSync } from 'shiki/core' import { createJavaScriptRegexEngine } from 'shiki/engine/javascript' -import js from 'shiki/langs/javascript.mjs' -import nord from 'shiki/themes/nord.mjs' const shiki = createHighlighterCoreSync({ themes: [nord], @@ -24,10 +24,10 @@ When doing so, it requires all `themes` and `langs` to be provide as plain objec The [Oniguruma Engine](/guide/regex-engines#oniguruma-engine) can only be created asynchronously, so you need to resolve the engine promise before creating the sync highlighter. ```ts +import js from '@shikijs/langs/javascript' +import nord from '@shikijs/themes/nord' import { createHighlighterCoreSync } from 'shiki/core' import { createOnigurumaEngine } from 'shiki/engine/oniguruma' -import js from 'shiki/langs/javascript.mjs' -import nord from 'shiki/themes/nord.mjs' // Load this somewhere beforehand const engine = await createOnigurumaEngine(import('shiki/wasm')) diff --git a/docs/packages/markdown-it.md b/docs/packages/markdown-it.md index e86e05bd..3d0f7c5a 100644 --- a/docs/packages/markdown-it.md +++ b/docs/packages/markdown-it.md @@ -38,10 +38,10 @@ import { createHighlighterCore } from 'shiki/core' const highlighter = await createHighlighterCore({ themes: [ - import('shiki/themes/vitesse-light.mjs') + import('@shikijs/themes/vitesse-light') ], langs: [ - import('shiki/langs/javascript.mjs'), + import('@shikijs/langs/javascript'), ], loadWasm: import('shiki/wasm') }) diff --git a/docs/packages/rehype.md b/docs/packages/rehype.md index 4339ba4a..a3d7c9bf 100644 --- a/docs/packages/rehype.md +++ b/docs/packages/rehype.md @@ -56,10 +56,10 @@ import { unified } from 'unified' const highlighter = await createHighlighterCore({ themes: [ - import('shiki/themes/vitesse-light.mjs') + import('@shikijs/themes/vitesse-light') ], langs: [ - import('shiki/langs/javascript.mjs'), + import('@shikijs/langs/javascript'), ], loadWasm: import('shiki/wasm') }) diff --git a/packages/core/src/constructors/bundle-factory.ts b/packages/core/src/constructors/bundle-factory.ts index 22ef6c60..7ff6c7c3 100644 --- a/packages/core/src/constructors/bundle-factory.ts +++ b/packages/core/src/constructors/bundle-factory.ts @@ -36,11 +36,11 @@ import { createHighlighterCore } from './highlighter' * ```ts * const createHighlighter = createdBundledHighlighter({ * langs: { - * typescript: () => import('shiki/langs/typescript.mjs'), + * typescript: () => import('@shikijs/langs/typescript'), * // ... * }, * themes: { - * nord: () => import('shiki/themes/nord.mjs'), + * nord: () => import('@shikijs/themes/nord'), * // ... * }, * engine: () => createOnigurumaEngine(), // or createJavaScriptRegexEngine() diff --git a/packages/shiki/test/cf.ts b/packages/shiki/test/cf.ts index d82d22c4..5a6a83c8 100644 --- a/packages/shiki/test/cf.ts +++ b/packages/shiki/test/cf.ts @@ -1,10 +1,9 @@ import type { LanguageRegistration } from '@shikijs/types' import { loadWasm } from '@shikijs/engine-oniguruma' +import js from '@shikijs/langs/javascript' +import nord from '@shikijs/themes/nord' import { createHighlighterCore } from 'shiki/core' -import js from 'shiki/langs/javascript.mjs' -import nord from 'shiki/themes/nord.mjs' - // @ts-expect-error no types // eslint-disable-next-line antfu/no-import-dist import wasm from '../dist/onig.wasm'