svelte-docsmith 0.3.0 → 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 +9 -0
- package/dist/preprocess.js +11 -2
- package/dist/ui/markdown/pre.svelte +78 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,6 +16,15 @@ live table of contents. No per-page wiring, no content collection to configure.
|
|
|
16
16
|
|
|
17
17
|
## Install
|
|
18
18
|
|
|
19
|
+
The fastest way to start a new docs site is the scaffolder, which wires up
|
|
20
|
+
everything below for you:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm create svelte-docsmith@latest my-docs
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
To add DocSmith to an existing SvelteKit app, install the package instead:
|
|
27
|
+
|
|
19
28
|
```bash
|
|
20
29
|
npm install svelte-docsmith
|
|
21
30
|
```
|
package/dist/preprocess.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* doesn't care where it's registered). It must never import component code.
|
|
7
7
|
*/
|
|
8
8
|
import rehypeSectionize from '@hbsnow/rehype-sectionize';
|
|
9
|
-
import { transformerNotationHighlight } from '@shikijs/transformers';
|
|
9
|
+
import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
|
|
10
10
|
import { escapeSvelte, mdsvex } from 'mdsvex';
|
|
11
11
|
import { fileURLToPath } from 'node:url';
|
|
12
12
|
import rehypeSlug from 'rehype-slug';
|
|
@@ -39,7 +39,16 @@ export function docsmith(options = {}) {
|
|
|
39
39
|
const html = escapeSvelte(highlighter.codeToHtml(code, {
|
|
40
40
|
lang: language,
|
|
41
41
|
themes,
|
|
42
|
-
|
|
42
|
+
// Comment-driven annotations authors write inside the fence:
|
|
43
|
+
// line highlight, diff (++/--), focus, error/warning, and
|
|
44
|
+
// word highlight. Each strips its own marker comment.
|
|
45
|
+
transformers: [
|
|
46
|
+
transformerNotationHighlight(),
|
|
47
|
+
transformerNotationDiff(),
|
|
48
|
+
transformerNotationFocus(),
|
|
49
|
+
transformerNotationErrorLevel(),
|
|
50
|
+
transformerNotationWordHighlight()
|
|
51
|
+
]
|
|
43
52
|
}));
|
|
44
53
|
// Without a layout there is no `Components.pre` to render through —
|
|
45
54
|
// keep Shiki's own <pre> as-is.
|
|
@@ -20,24 +20,6 @@
|
|
|
20
20
|
<pre class="not-prose shiki max-h-[32rem] flex shrink" use:clipboard.readText>
|
|
21
21
|
{@render children()}
|
|
22
22
|
</pre>
|
|
23
|
-
|
|
24
|
-
<!-- Scroll indicators with increased fade intensity -->
|
|
25
|
-
<div
|
|
26
|
-
class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-muted via-muted/70 to-transparent pointer-events-none"
|
|
27
|
-
aria-hidden="true"
|
|
28
|
-
></div>
|
|
29
|
-
<div
|
|
30
|
-
class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-muted via-muted/70 to-transparent pointer-events-none"
|
|
31
|
-
aria-hidden="true"
|
|
32
|
-
></div>
|
|
33
|
-
<div
|
|
34
|
-
class="absolute top-0 bottom-0 right-0 w-4 bg-gradient-to-l from-muted via-muted/70 to-transparent pointer-events-none"
|
|
35
|
-
aria-hidden="true"
|
|
36
|
-
></div>
|
|
37
|
-
<div
|
|
38
|
-
class="absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-r from-muted via-muted/70 to-transparent pointer-events-none"
|
|
39
|
-
aria-hidden="true"
|
|
40
|
-
></div>
|
|
41
23
|
</ScrollArea>
|
|
42
24
|
</div>
|
|
43
25
|
|
|
@@ -62,27 +44,95 @@
|
|
|
62
44
|
padding-inline: 1rem;
|
|
63
45
|
}
|
|
64
46
|
|
|
47
|
+
/* Two tiers of annotation. EMPHASIS (highlight, word) tints with the theme's
|
|
48
|
+
--primary, so it reads as the brand pointing at a line and recolors with
|
|
49
|
+
the active theme. SEMANTIC (diff, error, warning) uses fixed OKLCH hues so
|
|
50
|
+
green/red/amber stay legible on any theme. All are translucent washes over
|
|
51
|
+
the code background via color-mix. */
|
|
52
|
+
|
|
53
|
+
/* --- Line highlight (// [!code highlight] and {1,3} meta) --- */
|
|
65
54
|
:global(pre span.line.highlighted) {
|
|
66
|
-
background
|
|
55
|
+
background: color-mix(in oklch, var(--primary) 12%, transparent);
|
|
67
56
|
}
|
|
68
|
-
|
|
69
57
|
:global(.dark pre span.line.highlighted) {
|
|
70
|
-
background
|
|
58
|
+
background: color-mix(in oklch, var(--primary) 20%, transparent);
|
|
71
59
|
}
|
|
72
60
|
|
|
61
|
+
/* --- Diff (// [!code ++] / [!code --]) with +/- gutter glyphs --- */
|
|
62
|
+
:global(pre span.line.diff) {
|
|
63
|
+
position: relative;
|
|
64
|
+
}
|
|
73
65
|
:global(pre span.line.diff.add) {
|
|
74
|
-
background
|
|
66
|
+
background: color-mix(in oklch, oklch(0.7 0.16 150) 15%, transparent);
|
|
75
67
|
}
|
|
76
|
-
|
|
77
68
|
:global(pre span.line.diff.remove) {
|
|
78
|
-
background
|
|
69
|
+
background: color-mix(in oklch, oklch(0.62 0.2 25) 14%, transparent);
|
|
79
70
|
}
|
|
80
|
-
|
|
81
71
|
:global(.dark pre span.line.diff.add) {
|
|
82
|
-
background
|
|
72
|
+
background: color-mix(in oklch, oklch(0.7 0.16 150) 22%, transparent);
|
|
83
73
|
}
|
|
84
|
-
|
|
85
74
|
:global(.dark pre span.line.diff.remove) {
|
|
86
|
-
background
|
|
75
|
+
background: color-mix(in oklch, oklch(0.62 0.2 25) 22%, transparent);
|
|
76
|
+
}
|
|
77
|
+
:global(pre span.line.diff::before) {
|
|
78
|
+
position: absolute;
|
|
79
|
+
left: 0.45rem;
|
|
80
|
+
font-weight: 600;
|
|
81
|
+
}
|
|
82
|
+
:global(pre span.line.diff.add::before) {
|
|
83
|
+
content: '+';
|
|
84
|
+
color: oklch(0.6 0.15 150);
|
|
85
|
+
}
|
|
86
|
+
:global(pre span.line.diff.remove::before) {
|
|
87
|
+
content: '−';
|
|
88
|
+
color: oklch(0.58 0.19 25);
|
|
89
|
+
}
|
|
90
|
+
:global(.dark pre span.line.diff.add::before) {
|
|
91
|
+
color: oklch(0.78 0.17 150);
|
|
92
|
+
}
|
|
93
|
+
:global(.dark pre span.line.diff.remove::before) {
|
|
94
|
+
color: oklch(0.72 0.18 25);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* --- Error / warning severity (// [!code error] / [!code warning]).
|
|
98
|
+
No gutter glyph, so they stay distinct from the +/- diff lines. --- */
|
|
99
|
+
:global(pre span.line.highlighted.error) {
|
|
100
|
+
background: color-mix(in oklch, oklch(0.62 0.2 25) 18%, transparent);
|
|
101
|
+
}
|
|
102
|
+
:global(pre span.line.highlighted.warning) {
|
|
103
|
+
background: color-mix(in oklch, oklch(0.8 0.13 85) 22%, transparent);
|
|
104
|
+
}
|
|
105
|
+
:global(.dark pre span.line.highlighted.error) {
|
|
106
|
+
background: color-mix(in oklch, oklch(0.62 0.2 25) 26%, transparent);
|
|
107
|
+
}
|
|
108
|
+
:global(.dark pre span.line.highlighted.warning) {
|
|
109
|
+
background: color-mix(in oklch, oklch(0.8 0.13 85) 20%, transparent);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* --- Focus (// [!code focus]): dim the other lines and restore on hover.
|
|
113
|
+
A clean opacity fade reads calmer than a muddy blur. `:has` recreates
|
|
114
|
+
Shiki's stripped container flag from the line classes alone. --- */
|
|
115
|
+
:global(pre code:has(span.line.focused) span.line:not(.focused)) {
|
|
116
|
+
opacity: 0.42;
|
|
117
|
+
transition: opacity 0.25s ease;
|
|
118
|
+
}
|
|
119
|
+
:global(pre:hover code:has(span.line.focused) span.line:not(.focused)) {
|
|
120
|
+
opacity: 1;
|
|
121
|
+
}
|
|
122
|
+
@media (prefers-reduced-motion: reduce) {
|
|
123
|
+
:global(pre code:has(span.line.focused) span.line:not(.focused)) {
|
|
124
|
+
transition: none;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* --- Word highlight (// [!code word:name]): a primary-tinted inline pill --- */
|
|
129
|
+
:global(pre .highlighted-word) {
|
|
130
|
+
border-radius: 0.3rem;
|
|
131
|
+
padding: 0.1rem 0.3rem;
|
|
132
|
+
background: color-mix(in oklch, var(--primary) 16%, transparent);
|
|
133
|
+
box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent);
|
|
134
|
+
}
|
|
135
|
+
:global(.dark pre .highlighted-word) {
|
|
136
|
+
background: color-mix(in oklch, var(--primary) 24%, transparent);
|
|
87
137
|
}
|
|
88
138
|
</style>
|