prosemirror-highlight 0.5.0 → 0.6.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 +30 -0
- package/dist/sugar-high.d.ts +7 -0
- package/dist/sugar-high.js +36 -0
- package/package.json +12 -3
package/README.md
CHANGED
|
@@ -195,6 +195,35 @@ export const refractorPlugin = createHighlightPlugin({ parser })
|
|
|
195
195
|
|
|
196
196
|
</details>
|
|
197
197
|
|
|
198
|
+
### With [Sugar high]
|
|
199
|
+
|
|
200
|
+
<details>
|
|
201
|
+
<summary>Highlight with CSS</summary>
|
|
202
|
+
|
|
203
|
+
```ts
|
|
204
|
+
import { createHighlightPlugin } from 'prosemirror-highlight'
|
|
205
|
+
import { createParser } from 'prosemirror-highlight/sugar-high'
|
|
206
|
+
|
|
207
|
+
const parser = createParser()
|
|
208
|
+
export const sugarHighPlugin = createHighlightPlugin({ parser })
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
```css
|
|
212
|
+
:root {
|
|
213
|
+
--sh-class: #2d5e9d;
|
|
214
|
+
--sh-identifier: #354150;
|
|
215
|
+
--sh-sign: #8996a3;
|
|
216
|
+
--sh-property: #0550ae;
|
|
217
|
+
--sh-entity: #249a97;
|
|
218
|
+
--sh-jsxliterals: #6266d1;
|
|
219
|
+
--sh-string: #00a99a;
|
|
220
|
+
--sh-keyword: #f47067;
|
|
221
|
+
--sh-comment: #a19595;
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
</details>
|
|
226
|
+
|
|
198
227
|
## Online demo
|
|
199
228
|
|
|
200
229
|
[](https://stackblitz.com/github/ocavue/prosemirror-highlight?file=playground%2Fmain.ts)
|
|
@@ -215,3 +244,4 @@ MIT
|
|
|
215
244
|
[Shikiji]: https://github.com/antfu/shikiji
|
|
216
245
|
[refractor]: https://github.com/wooorm/refractor
|
|
217
246
|
[Prism]: https://github.com/PrismJS/prism
|
|
247
|
+
[Sugar high]: https://github.com/huozhi/sugar-high
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// src/sugar-high.ts
|
|
2
|
+
import { Decoration } from "prosemirror-view";
|
|
3
|
+
import { tokenize } from "sugar-high";
|
|
4
|
+
var types = [
|
|
5
|
+
"identifier",
|
|
6
|
+
"keyword",
|
|
7
|
+
"string",
|
|
8
|
+
"class",
|
|
9
|
+
"property",
|
|
10
|
+
"entity",
|
|
11
|
+
"jsxliterals",
|
|
12
|
+
"sign",
|
|
13
|
+
"comment",
|
|
14
|
+
"break",
|
|
15
|
+
"space"
|
|
16
|
+
];
|
|
17
|
+
function createParser() {
|
|
18
|
+
return function parser({ content, pos }) {
|
|
19
|
+
const decorations = [];
|
|
20
|
+
const tokens = tokenize(content);
|
|
21
|
+
let from = pos + 1;
|
|
22
|
+
for (const [type, content2] of tokens) {
|
|
23
|
+
const to = from + content2.length;
|
|
24
|
+
const decoration = Decoration.inline(from, to, {
|
|
25
|
+
class: `sh__token--${types[type]}`,
|
|
26
|
+
style: `color: var(--sh-${types[type]})`
|
|
27
|
+
});
|
|
28
|
+
decorations.push(decoration);
|
|
29
|
+
from = to;
|
|
30
|
+
}
|
|
31
|
+
return decorations;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
createParser
|
|
36
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "prosemirror-highlight",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"packageManager": "pnpm@8.13.1",
|
|
6
6
|
"description": "A ProseMirror plugin to highlight code blocks",
|
|
7
7
|
"author": "ocavue <ocavue@gmail.com>",
|
|
@@ -47,6 +47,10 @@
|
|
|
47
47
|
"./shikiji": {
|
|
48
48
|
"types": "./dist/shikiji.d.ts",
|
|
49
49
|
"default": "./dist/shikiji.js"
|
|
50
|
+
},
|
|
51
|
+
"./sugar-high": {
|
|
52
|
+
"types": "./dist/sugar-high.d.ts",
|
|
53
|
+
"default": "./dist/sugar-high.js"
|
|
50
54
|
}
|
|
51
55
|
},
|
|
52
56
|
"files": [
|
|
@@ -62,7 +66,8 @@
|
|
|
62
66
|
"prosemirror-view": "^1.32.4",
|
|
63
67
|
"refractor": "^4.8.1",
|
|
64
68
|
"shiki": "^1.0.0",
|
|
65
|
-
"shikiji": "^0.8.0 || ^0.9.0 || ^0.10.0"
|
|
69
|
+
"shikiji": "^0.8.0 || ^0.9.0 || ^0.10.0",
|
|
70
|
+
"sugar-high": "^0.6.1"
|
|
66
71
|
},
|
|
67
72
|
"peerDependenciesMeta": {
|
|
68
73
|
"@types/hast": {
|
|
@@ -94,6 +99,9 @@
|
|
|
94
99
|
},
|
|
95
100
|
"shikiji": {
|
|
96
101
|
"optional": true
|
|
102
|
+
},
|
|
103
|
+
"sugar-high": {
|
|
104
|
+
"optional": true
|
|
97
105
|
}
|
|
98
106
|
},
|
|
99
107
|
"devDependencies": {
|
|
@@ -103,7 +111,7 @@
|
|
|
103
111
|
"@types/node": "^20.10.6",
|
|
104
112
|
"eslint": "^8.56.0",
|
|
105
113
|
"highlight.js": "^11.9.0",
|
|
106
|
-
"jsdom": "^
|
|
114
|
+
"jsdom": "^24.0.0",
|
|
107
115
|
"lowlight": "^3.1.0",
|
|
108
116
|
"prettier": "^3.1.1",
|
|
109
117
|
"prosemirror-example-setup": "^1.2.2",
|
|
@@ -115,6 +123,7 @@
|
|
|
115
123
|
"refractor": "^4.8.1",
|
|
116
124
|
"shiki": "^1.0.0",
|
|
117
125
|
"shikiji": "^0.10.2",
|
|
126
|
+
"sugar-high": "^0.6.1",
|
|
118
127
|
"tsup": "^8.0.1",
|
|
119
128
|
"typescript": "^5.3.3",
|
|
120
129
|
"vite": "^5.0.10",
|