shikiji - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

package.json

		{
		"name": "shikiji",
		"type": "module",
		"version": "0.2.4",
		"version": "0.3.0",
		"packageManager": "pnpm@8.6.12",
		@@ -6,0 +6,0 @@ "description": "An ESM-focused rewrite of shiki",

README.md

		@@ -12,3 +12,4 @@ # Shikiji 式辞
		- Drop CJS and IIFE build, focus on ESM (or you can use bundlers).
		- Bundles languages/themes composedly.
		- [Bundles languages/themes composedly](#fine-grained-bundle).
		- [Light/Dark dual themes support](#lightdark-dual-themes).
		- Zero-dependencies.
		@@ -56,2 +57,8 @@ - Simplified APIs.

		Currently supports:

		- `codeToThemedTokens`
		- `codeToHtml`
		- `codeToHtmlDualThemes`

		Internally they maintains a singleton highlighter instance and load the theme/language on demand. Different from `shiki.codeToHtml`, the `codeToHtml` shorthand function returns a Promise and `lang` and `theme` options are required.
		@@ -161,2 +168,78 @@

		## Additional Features

		### Light/Dark Dual Themes

		`shikiji` added an experimental light/dark dual themes support. Different from [markdown-it-shiki](https://github.com/antfu/markdown-it-shiki#dark-mode)'s approach which renders the code twice, `shikiji`'s dual themes approach uses CSS variables to store the colors on each token. It's more performant with a smaller bundle size.

		Use `codeToHtmlDualThemes` to render the code with dual themes:

		```js
		import { getHighlighter } from 'shikiji'

		const shiki = await getHighlighter({
		themes: ['nord', 'min-light'],
		langs: ['javascript'],
		})

		const code = shiki.codeToHtmlDualThemes('console.log("hello")', {
		lang: 'javascript',
		theme: {
		light: 'min-light',
		dark: 'nord',
		}
		})
		```

		The following HTML will be generated ([preview](https://htmlpreview.github.io/?https://raw.githubusercontent.com/antfu/shikiji/main/test/out/dual-themes.html)):

		```html
		<pre
		class="shiki shiki-dual-themes min-light--nord"
		style="background-color: #ffffff;--shiki-dark-bg:#2e3440ff;color: #ffffff;--shiki-dark-bg:#2e3440ff"
		tabindex="0"
		>
		<code>
		<span class="line">
		<span style="color:#1976D2;--shiki-dark:#D8DEE9">console</span>
		<span style="color:#6F42C1;--shiki-dark:#ECEFF4">.</span>
		<span style="color:#6F42C1;--shiki-dark:#88C0D0">log</span>
		<span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">(</span>
		<span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>
		<span style="color:#22863A;--shiki-dark:#A3BE8C">hello</span>
		<span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>
		<span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">)</span>
		</span>
		</code>
		</pre>
		```

		To make it reactive to your site's theme, you need to add a short CSS snippet:

		###### Query-based Dark Mode

		```css
		@media (prefers-color-scheme: dark) {
		.shiki {
		background-color: var(--shiki-dark-bg) !important;
		color: var(--shiki-dark) !important;
		}
		.shiki span {
		color: var(--shiki-dark) !important;
		}
		}
		```

		###### Class-based Dark Mode

		```css
		html.dark .shiki {
		background-color: var(--shiki-dark-bg) !important;
		color: var(--shiki-dark) !important;
		}
		html.dark .shiki span {
		color: var(--shiki-dark) !important;
		}
		```

		## Bundle Size
		@@ -163,0 +246,0 @@

dist/chunks/core.mjs