sugar-high 0.3.1 → 0.4.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 +14 -21
- package/lib/index.mjs +3 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,26 +35,14 @@ Then make your own theme with customized colors by token type and put in global
|
|
|
35
35
|
* comment
|
|
36
36
|
* jsxliterals
|
|
37
37
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
.sh__string {
|
|
48
|
-
color: #00a99a;
|
|
49
|
-
}
|
|
50
|
-
.sh__keyword {
|
|
51
|
-
color: #f47067;
|
|
52
|
-
}
|
|
53
|
-
.sh__comment {
|
|
54
|
-
color: #a19595;
|
|
55
|
-
}
|
|
56
|
-
.sh__jsxliterals {
|
|
57
|
-
color: #6266d1;
|
|
38
|
+
:root {
|
|
39
|
+
--sh-class: #2d5e9d;
|
|
40
|
+
--sh-identifier: #354150;
|
|
41
|
+
--sh-sign: #8996a3;
|
|
42
|
+
--sh-string: #00a99a;
|
|
43
|
+
--sh-keyword: #f47067;
|
|
44
|
+
--sh-comment: #a19595;
|
|
45
|
+
--sh-jsxliterals: #6266d1;
|
|
58
46
|
}
|
|
59
47
|
```
|
|
60
48
|
|
|
@@ -65,8 +53,13 @@ Then make your own theme with customized colors by token type and put in global
|
|
|
65
53
|
Sugar high provide `.sh_line` class name for each line. To display line number, define the `.sh_line::before` element with CSS will enable line numbers automatically.
|
|
66
54
|
|
|
67
55
|
```css
|
|
56
|
+
pre code {
|
|
57
|
+
counter-reset: sh-line-number;
|
|
58
|
+
}
|
|
59
|
+
|
|
68
60
|
.sh__line::before {
|
|
69
|
-
|
|
61
|
+
counter-increment: sh-line-number 1;
|
|
62
|
+
content: counter(sh-line-number);
|
|
70
63
|
margin-right: 24px;
|
|
71
64
|
text-align: right;
|
|
72
65
|
color: #a4a4a4;
|
package/lib/index.mjs
CHANGED
|
@@ -362,14 +362,13 @@ export function tokenize(code) {
|
|
|
362
362
|
* @return {Array<string>}
|
|
363
363
|
*/
|
|
364
364
|
function generate(tokens) {
|
|
365
|
-
let lineNo = 1
|
|
366
365
|
const linesHtml = []
|
|
367
|
-
const createLine = (content) => `<span
|
|
366
|
+
const createLine = (content) => `<span class="sh__line">${content}</span>`
|
|
368
367
|
|
|
369
368
|
function flushLine(tokens) {
|
|
370
369
|
linesHtml.push(createLine(
|
|
371
|
-
tokens.map(
|
|
372
|
-
`<span
|
|
370
|
+
tokens.map(([type, value]) => (
|
|
371
|
+
`<span style="color: var(--sh-${types[type]})">${encode(value)}</span>`
|
|
373
372
|
))
|
|
374
373
|
.join('')
|
|
375
374
|
))
|