From 56ce822abf67dffb29365632d3d9dd4d7dac2a03 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 13 Aug 2023 16:21:27 +0200 Subject: [PATCH] fix: do not include any default themes/languages --- README.md | 33 ++++++++++++++++++++++++++++++--- src/bundled/highlighter.ts | 6 +++--- 2 files changed, 33 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6374291b1..bc3e37741 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,33 @@ await shiki.loadLanguage('css') const code = shiki.codeToHtml('const a = 1', { lang: 'javascript' }) ``` +Unlike `shiki`, `shikiji` does not load any themes or languages when not specified. + +```js +import { getHighlighter } from 'shikiji' + +const shiki = await getHighlighter() + +shiki.codeToHtml('const a = 1', { lang: 'javascript' }) // throws error, `javascript` is not loaded + +await shiki.loadLanguage('javascript') // load the language +``` + +If you want to load all themes and languages (not recommended), you can iterate all keys from `bundledLanguages` and `bundledThemes`. + +```js +import { bundledLanguages, bundledThemes, getHighlighter } from 'shikiji' + +const shiki = await getHighlighter({ + themes: Object.keys(bundledThemes), + langs: Object.keys(bundledLanguages), +}) + +shiki.codeToHtml('const a = 1', { lang: 'javascript' }) +``` + +Or if your usage can be async, you can try the [shorthands](#shorthands) which will load the theme/language on demand. + ### Fine-grained Bundle When importing `shikiji`, all the themes and languages are bundled as async chunks. Normally it won't be a concern to you as they are not being loaded if you don't use them. While in some cases you want to control what to bundle size, you can use the core and compose your own bundle. @@ -151,10 +178,10 @@ export default { In addition to the `getHighlighter` function, `shikiji` also provides some shorthand functions for simpler usage. ```js -import { codeToHtml } from 'shikiji' +import { codeToHtml, codeToThemedTokens } from 'shikiji' -const code1 = await codeToHtml('const a = 1', { lang: 'javascript', theme: 'nord' }) -const code2 = await codeToHtml('
bar
', { lang: 'html', theme: 'min-dark' }) +const code = await codeToHtml('const a = 1', { lang: 'javascript', theme: 'nord' }) +const tokens = await codeToThemedTokens('
bar
', { lang: 'html', theme: 'min-dark' }) ``` Currently supports: diff --git a/src/bundled/highlighter.ts b/src/bundled/highlighter.ts index 098de759a..e168ad96a 100644 --- a/src/bundled/highlighter.ts +++ b/src/bundled/highlighter.ts @@ -1,5 +1,5 @@ import { bundledThemes } from '../themes' -import { bundledLanguages, bundledLanguagesBase } from '../langs' +import { bundledLanguages } from '../langs' import { getHighlighterCore } from '../core' import { getWasmInlined } from '../wasm' import type { BuiltinLanguages, BuiltinThemes, CodeToHtmlOptions, LanguageInput, PlainTextLanguage, ThemeInput } from '../types' @@ -35,9 +35,9 @@ export async function getHighlighter(options: HighlighterOptions = {}) { return theme } - const _themes = (options.themes ?? ['nord']).map(resolveTheme) as ThemeInput[] + const _themes = (options.themes ?? []).map(resolveTheme) as ThemeInput[] - const langs = (options.langs ?? Object.keys(bundledLanguagesBase) as BuiltinLanguages[]) + const langs = (options.langs ?? [] as BuiltinLanguages[]) .map(resolveLang) const core = await getHighlighterCore({