@fuzdev/fuz_code 0.37.0 → 0.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -24
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @fuzdev/fuz_code
|
|
2
2
|
|
|
3
3
|
[<img src="static/logo.svg" alt="a friendly pink spider facing you" align="right" width="192" height="192">](https://code.fuz.dev/)
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ The main changes:
|
|
|
15
15
|
- has various incompatible changes, so using Prism grammars requires some tweaks
|
|
16
16
|
- smaller (by 7kB minified and 3kB gzipped, ~1/3 less)
|
|
17
17
|
- written in TypeScript
|
|
18
|
-
- is a fork, see the [MIT license](https://github.com/
|
|
18
|
+
- is a fork, see the [MIT license](https://github.com/fuzdev/fuz_code/blob/main/LICENSE)
|
|
19
19
|
|
|
20
20
|
Like Prism, there are zero dependencies (unless you count Prism's `@types/prismjs`),
|
|
21
21
|
but there are two optional dependencies:
|
|
@@ -25,7 +25,7 @@ but there are two optional dependencies:
|
|
|
25
25
|
based on [`prism-svelte`](https://github.com/pngwn/prism-svelte)
|
|
26
26
|
and a [Svelte component](src/lib/Code.svelte) for convenient usage.
|
|
27
27
|
- The [default theme](src/lib/theme.css) integrates
|
|
28
|
-
with my CSS library [Moss](https://github.com/
|
|
28
|
+
with my CSS library [Moss](https://github.com/fuzdev/fuz_css) for colors that adapt to the user's runtime `color-scheme` preference.
|
|
29
29
|
Non-Moss users should import [theme_variables.css](src/lib/theme_variables.css)
|
|
30
30
|
or otherwise define those variables.
|
|
31
31
|
|
|
@@ -44,12 +44,12 @@ and Shiki is designed mainly for buildtime usage.
|
|
|
44
44
|
## Usage
|
|
45
45
|
|
|
46
46
|
```bash
|
|
47
|
-
npm i -D @
|
|
47
|
+
npm i -D @fuzdev/fuz_code
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
```svelte
|
|
51
51
|
<script lang="ts">
|
|
52
|
-
import Code from '@
|
|
52
|
+
import Code from '@fuzdev/fuz_code/Code.svelte';
|
|
53
53
|
</script>
|
|
54
54
|
|
|
55
55
|
<!-- defaults to Svelte -->
|
|
@@ -59,13 +59,13 @@ npm i -D @ryanatkn/fuz_code
|
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
```ts
|
|
62
|
-
import {syntax_styler_global} from '@
|
|
62
|
+
import {syntax_styler_global} from '@fuzdev/fuz_code/syntax_styler_global.js';
|
|
63
63
|
|
|
64
64
|
// Generate HTML with syntax highlighting
|
|
65
65
|
const html = syntax_styler_global.stylize(code, 'ts');
|
|
66
66
|
|
|
67
67
|
// Get raw tokens for custom processing
|
|
68
|
-
import {tokenize_syntax} from '@
|
|
68
|
+
import {tokenize_syntax} from '@fuzdev/fuz_code/tokenize_syntax.js';
|
|
69
69
|
const tokens = tokenize_syntax(code, syntax_styler_global.get_lang('ts'));
|
|
70
70
|
```
|
|
71
71
|
|
|
@@ -75,31 +75,31 @@ With SvelteKit:
|
|
|
75
75
|
|
|
76
76
|
```ts
|
|
77
77
|
// +layout.svelte
|
|
78
|
-
import '@
|
|
78
|
+
import '@fuzdev/fuz_code/theme.css';
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
The primary themes (currently just [one](src/lib/theme.css)) have a dependency
|
|
82
|
-
on my CSS library [Moss](https://github.com/
|
|
83
|
-
for [color-scheme](https://
|
|
84
|
-
See the [Moss docs](https://
|
|
82
|
+
on my CSS library [Moss](https://github.com/fuzdev/fuz_css)
|
|
83
|
+
for [color-scheme](https://css.fuz.dev/docs/themes) awareness.
|
|
84
|
+
See the [Moss docs](https://css.fuz.dev/) for its usage.
|
|
85
85
|
|
|
86
86
|
If you're not using Moss, import `theme_variables.css` alongside `theme.css`:
|
|
87
87
|
|
|
88
88
|
```ts
|
|
89
89
|
// Without Moss:
|
|
90
|
-
import '@
|
|
91
|
-
import '@
|
|
90
|
+
import '@fuzdev/fuz_code/theme.css';
|
|
91
|
+
import '@fuzdev/fuz_code/theme_variables.css';
|
|
92
92
|
```
|
|
93
93
|
|
|
94
94
|
### Modules
|
|
95
95
|
|
|
96
|
-
- [@
|
|
97
|
-
- [@
|
|
98
|
-
- [@
|
|
99
|
-
default theme that depends on [Moss](https://github.com/
|
|
100
|
-
- [@
|
|
96
|
+
- [@fuzdev/fuz_code/syntax_styler_global.js](src/lib/syntax_styler_global.ts) - pre-configured instance with all grammars
|
|
97
|
+
- [@fuzdev/fuz_code/syntax_styler.js](src/lib/syntax_styler.ts) - base class for custom grammars
|
|
98
|
+
- [@fuzdev/fuz_code/theme.css](src/lib/theme.css) -
|
|
99
|
+
default theme that depends on [Moss](https://github.com/fuzdev/fuz_css)
|
|
100
|
+
- [@fuzdev/fuz_code/theme_variables.css](src/lib/theme_variables.css) -
|
|
101
101
|
CSS variables for non-Moss users
|
|
102
|
-
- [@
|
|
102
|
+
- [@fuzdev/fuz_code/Code.svelte](src/lib/Code.svelte) -
|
|
103
103
|
Svelte component for syntax highlighting with HTML generation
|
|
104
104
|
|
|
105
105
|
I encourage you to poke around [`src/lib`](src/lib) if you're interested in using fuz_code.
|
|
@@ -145,7 +145,7 @@ using HTML generation is recommended for most use cases.
|
|
|
145
145
|
|
|
146
146
|
```svelte
|
|
147
147
|
<script lang="ts">
|
|
148
|
-
import CodeHighlight from '@
|
|
148
|
+
import CodeHighlight from '@fuzdev/fuz_code/CodeHighlight.svelte';
|
|
149
149
|
</script>
|
|
150
150
|
|
|
151
151
|
<!-- auto-detect and use CSS Highlight API when available -->
|
|
@@ -160,17 +160,17 @@ When using the experimental highlight component, import the corresponding theme:
|
|
|
160
160
|
|
|
161
161
|
```ts
|
|
162
162
|
// instead of theme.css, import theme_highlight.css in +layout.svelte:
|
|
163
|
-
import '@
|
|
163
|
+
import '@fuzdev/fuz_code/theme_highlight.css';
|
|
164
164
|
```
|
|
165
165
|
|
|
166
166
|
Experimental modules:
|
|
167
167
|
|
|
168
|
-
- [@
|
|
168
|
+
- [@fuzdev/fuz_code/CodeHighlight.svelte](src/lib/CodeHighlight.svelte) -
|
|
169
169
|
component supporting both HTML generation and CSS Custom Highlight API
|
|
170
|
-
- [@
|
|
170
|
+
- [@fuzdev/fuz_code/highlight_manager.js](src/lib/highlight_manager.ts) -
|
|
171
171
|
manages browser [`Highlight`](https://developer.mozilla.org/en-US/docs/Web/API/Highlight)
|
|
172
172
|
and [`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) APIs
|
|
173
|
-
- [@
|
|
173
|
+
- [@fuzdev/fuz_code/theme_highlight.css](src/lib/theme_highlight.css) -
|
|
174
174
|
theme with `::highlight()` pseudo-elements for CSS Custom Highlight API
|
|
175
175
|
|
|
176
176
|
## License [🐦](https://wikipedia.org/wiki/Free_and_open-source_software)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuzdev/fuz_code",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "syntax styling utilities and components for TypeScript, Svelte, and Markdown",
|
|
5
5
|
"glyph": "🎨",
|
|
6
6
|
"logo": "logo.svg",
|
|
@@ -8,13 +8,13 @@
|
|
|
8
8
|
"public": true,
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"homepage": "https://code.fuz.dev/",
|
|
11
|
-
"repository": "https://github.com/
|
|
11
|
+
"repository": "https://github.com/fuzdev/fuz_code",
|
|
12
12
|
"author": {
|
|
13
13
|
"name": "Ryan Atkinson",
|
|
14
14
|
"email": "mail@ryanatkn.com",
|
|
15
15
|
"url": "https://www.ryanatkn.com/"
|
|
16
16
|
},
|
|
17
|
-
"bugs": "https://github.com/
|
|
17
|
+
"bugs": "https://github.com/fuzdev/fuz_code/issues",
|
|
18
18
|
"funding": "https://www.ryanatkn.com/funding",
|
|
19
19
|
"scripts": {
|
|
20
20
|
"start": "gro dev",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"node": ">=22.15"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@fuzdev/fuz_css": ">=0.
|
|
36
|
+
"@fuzdev/fuz_css": ">=0.41.0",
|
|
37
37
|
"svelte": "^5"
|
|
38
38
|
},
|
|
39
39
|
"peerDependenciesMeta": {
|
|
@@ -46,28 +46,28 @@
|
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@changesets/changelog-git": "^0.2.1",
|
|
49
|
-
"@
|
|
49
|
+
"@fuzdev/fuz_css": "^0.41.0",
|
|
50
|
+
"@fuzdev/fuz_ui": "^0.169.0",
|
|
51
|
+
"@fuzdev/fuz_util": "^0.42.0",
|
|
50
52
|
"@ryanatkn/eslint-config": "^0.9.0",
|
|
51
|
-
"@ryanatkn/
|
|
52
|
-
"@ryanatkn/gro": "^0.179.0",
|
|
53
|
-
"@fuzdev/fuz_css": "^0.40.0",
|
|
53
|
+
"@ryanatkn/gro": "^0.181.0",
|
|
54
54
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
55
|
-
"@sveltejs/kit": "^2.49.
|
|
56
|
-
"@sveltejs/package": "^2.5.
|
|
55
|
+
"@sveltejs/kit": "^2.49.1",
|
|
56
|
+
"@sveltejs/package": "^2.5.7",
|
|
57
57
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
58
58
|
"@types/node": "^24.10.1",
|
|
59
59
|
"eslint": "^9.39.1",
|
|
60
|
-
"eslint-plugin-svelte": "^3.13.
|
|
60
|
+
"eslint-plugin-svelte": "^3.13.1",
|
|
61
61
|
"esm-env": "^1.2.2",
|
|
62
|
-
"prettier": "^3.
|
|
62
|
+
"prettier": "^3.7.4",
|
|
63
63
|
"prettier-plugin-svelte": "^3.4.0",
|
|
64
|
-
"svelte": "^5.
|
|
64
|
+
"svelte": "^5.45.6",
|
|
65
65
|
"svelte-check": "^4.3.4",
|
|
66
|
-
"tinybench": "^
|
|
66
|
+
"tinybench": "^6.0.0",
|
|
67
67
|
"tslib": "^2.8.1",
|
|
68
68
|
"typescript": "^5.9.3",
|
|
69
|
-
"typescript-eslint": "^8.48.
|
|
70
|
-
"vitest": "^4.0.
|
|
69
|
+
"typescript-eslint": "^8.48.1",
|
|
70
|
+
"vitest": "^4.0.15"
|
|
71
71
|
},
|
|
72
72
|
"prettier": {
|
|
73
73
|
"plugins": [
|