@peaceroad/markdown-it-renderer-fence 0.7.0 → 0.8.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.
Files changed (30) hide show
  1. package/README.md +175 -471
  2. package/docs/README.md +37 -0
  3. package/docs/code-highlighting-design.md +317 -0
  4. package/docs/custom-highlight-styling-guide.md +204 -0
  5. package/package.json +21 -11
  6. package/src/custom-highlight/option-validator.js +5 -5
  7. package/src/custom-highlight/{shiki-keyword-rules.js → shiki-role-rules.js} +229 -44
  8. package/src/custom-highlight/{shiki-keyword.js → shiki-role.js} +64 -56
  9. package/src/custom-highlight/shiki-theme-role.js +176 -0
  10. package/src/fence/line-notes.js +27 -9
  11. package/src/fence/render-api-provider.js +59 -50
  12. package/src/fence/render-api-renderer.js +7 -6
  13. package/src/fence/render-api.js +20 -12
  14. package/src/fence/render-markup.js +4 -9
  15. package/src/fence/render-shared.js +78 -8
  16. package/theme/_shared/rf-core.css +164 -0
  17. package/theme/rf-basic/README.md +91 -0
  18. package/theme/rf-basic/api/highlightjs.css +71 -0
  19. package/theme/rf-basic/api/shiki.css +67 -0
  20. package/theme/rf-basic/base.css +3 -0
  21. package/theme/rf-basic/index.css +7 -0
  22. package/theme/rf-basic/index.js +155 -0
  23. package/theme/rf-basic/markup/highlightjs.css +77 -0
  24. package/theme/rf-basic/markup/shiki.css +11 -0
  25. package/theme/rf-monochrome/README.md +71 -0
  26. package/theme/rf-monochrome/base.css +3 -0
  27. package/theme/rf-monochrome/index.css +5 -0
  28. package/theme/rf-monochrome/index.js +72 -0
  29. package/theme/rf-monochrome/markup/highlightjs.css +134 -0
  30. package/theme/rf-monochrome/markup/shiki.css +27 -0
package/theme/rf-monochrome/markup/highlightjs.css ADDED
@@ -0,0 +1,134 @@
1
+ /*! rf-monochrome highlightjs markup theme | MIT License */
2
+
3
+ pre {
4
+ --rf-monochrome-fg: var(--rf-code-fg);
5
+ --rf-monochrome-bg: var(--rf-code-bg);
6
+ color: var(--rf-monochrome-fg);
7
+ background: var(--rf-monochrome-bg);
8
+ }
9
+
10
+ pre code,
11
+ pre samp,
12
+ .hljs {
13
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
14
+ background: transparent;
15
+ --rf-monochrome-comment-font-style: italic;
16
+ --rf-monochrome-meta-font-style: italic;
17
+ --rf-monochrome-meta-font-weight: 400;
18
+ --rf-monochrome-doctag-font-weight: 400;
19
+ }
20
+
21
+ /*
22
+ * `samp` represents terminal I/O. Keep the terminal surface inverted while
23
+ * suppressing per-token emphasis below, so command/output lines remain easy to
24
+ * distinguish from code.
25
+ */
26
+ pre:has(> samp) {
27
+ --rf-monochrome-fg: var(--rf-samp-fg);
28
+ --rf-monochrome-bg: var(--rf-samp-bg);
29
+ color: var(--rf-monochrome-fg);
30
+ background: var(--rf-monochrome-bg);
31
+ border-color: var(--rf-samp-border);
32
+ }
33
+
34
+ .hljs-keyword,
35
+ .hljs-selector-tag,
36
+ .hljs-title.class_,
37
+ .hljs-section,
38
+ .hljs-name,
39
+ .hljs-type,
40
+ .hljs-strong {
41
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
42
+ font-weight: 700;
43
+ }
44
+
45
+ .hljs-title,
46
+ .hljs-title.function_,
47
+ .hljs-built_in,
48
+ .hljs-function,
49
+ .hljs-class {
50
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
51
+ font-weight: 400;
52
+ }
53
+
54
+ .hljs-comment,
55
+ .hljs-quote,
56
+ .hljs-emphasis {
57
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
58
+ /*
59
+ * Italic comments are useful in one-color Latin code samples, but CJK
60
+ * comments can become harder to read. Sites with many Japanese/Chinese/Korean
61
+ * comments can override --rf-monochrome-comment-font-style: normal.
62
+ */
63
+ font-style: var(--rf-monochrome-comment-font-style, italic);
64
+ }
65
+
66
+ .hljs-meta,
67
+ .hljs-doctag {
68
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
69
+ font-style: var(--rf-monochrome-meta-font-style, italic);
70
+ font-weight: var(--rf-monochrome-meta-font-weight, 400);
71
+ }
72
+
73
+ .hljs-comment .hljs-doctag {
74
+ font-style: inherit;
75
+ font-weight: var(--rf-monochrome-doctag-font-weight, 400);
76
+ }
77
+
78
+ .hljs-comment .hljs-type,
79
+ .hljs-comment .hljs-variable {
80
+ font-style: inherit;
81
+ font-weight: 400;
82
+ }
83
+
84
+ /*
85
+ * Keep terminal prompts one-color even when the color preset is loaded before
86
+ * this theme. The color preset intentionally gives `samp` prompts an accent
87
+ * color, and its selector is more specific than plain `.hljs-meta`.
88
+ */
89
+ .hljs-meta.prompt_,
90
+ pre:has(> samp) .hljs-meta.prompt_ {
91
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
92
+ }
93
+
94
+ .hljs-string,
95
+ .hljs-regexp,
96
+ .hljs-number,
97
+ .hljs-literal,
98
+ .hljs-symbol,
99
+ .hljs-variable,
100
+ .hljs-template-variable,
101
+ .hljs-attr,
102
+ .hljs-attribute,
103
+ .hljs-selector-class,
104
+ .hljs-selector-id,
105
+ .hljs-property,
106
+ .hljs-params,
107
+ .hljs-subst,
108
+ .hljs-tag,
109
+ .hljs-punctuation,
110
+ .hljs-operator,
111
+ .hljs-bullet,
112
+ .hljs-link,
113
+ .hljs-addition,
114
+ .hljs-deletion {
115
+ color: var(--rf-monochrome-fg, var(--rf-code-fg));
116
+ font-style: normal;
117
+ font-weight: 400;
118
+ }
119
+
120
+ .hljs-addition,
121
+ .hljs-deletion {
122
+ background: transparent;
123
+ }
124
+
125
+ /*
126
+ * `samp` usually represents terminal I/O rather than source-code structure.
127
+ * Keep prompts and shell control words from becoming heavier than nearby
128
+ * commands/output; otherwise terminal snippets can look inconsistent.
129
+ */
130
+ pre:has(> samp) [class^="hljs-"],
131
+ pre:has(> samp) [class*=" hljs-"] {
132
+ font-style: normal;
133
+ font-weight: 400;
134
+ }
package/theme/rf-monochrome/markup/shiki.css ADDED
@@ -0,0 +1,27 @@
1
+ /*! rf-monochrome Shiki markup overrides | MIT License */
2
+
3
+ /*
4
+ * Shiki markup writes background/color as inline styles. The complete CSS
5
+ * preset maps monochrome source-code blocks to the shared code surface, while
6
+ * the standalone theme object can still be used as a currentColor theme.
7
+ */
8
+ pre.rf-monochrome {
9
+ color: var(--rf-code-fg) !important;
10
+ background-color: var(--rf-code-bg) !important;
11
+ }
12
+
13
+ pre:has(> samp).rf-monochrome {
14
+ color: var(--rf-samp-fg) !important;
15
+ background-color: var(--rf-samp-bg) !important;
16
+ border-color: var(--rf-samp-border);
17
+ }
18
+
19
+ /*
20
+ * Shiki also emits font-weight/font-style inline. Limit this important override
21
+ * to monochrome `samp` blocks so normal one-color source-code blocks can still
22
+ * use bold/italic as their only syntax cues.
23
+ */
24
+ pre:has(> samp).rf-monochrome span[style] {
25
+ font-style: normal !important;
26
+ font-weight: 400 !important;
27
+ }