@halo-dev/shiki-code-element 1.3.1 → 1.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 +29 -1
- package/dist/index.js +81 -23
- package/dist/notation-fold-LJHA_uH-.js +99 -0
- package/dist/transformers/notation-fold.d.ts +2 -0
- package/dist/variants/base.d.ts +3 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -85,6 +85,34 @@ This component integrates with [Shiki Transformers](https://shiki.style/packages
|
|
|
85
85
|
- Line focus: `// [!code focus]`
|
|
86
86
|
- Error/warning annotations: `// [!code error]`, `// [!code warning]`
|
|
87
87
|
- Code diff (additions/deletions): `// [!code ++]`, `// [!code --]`
|
|
88
|
+
- Code folding: `// [!code fold:start]`, `// [!code fold:end]`
|
|
89
|
+
- Tail folding: `// [!code fold:start]` without `fold:end` folds to the end of the code block
|
|
90
|
+
|
|
91
|
+
Fold notations must be written in comments for the current language. Paired
|
|
92
|
+
`fold:start` and `fold:end` markers collapse the lines between them:
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
console.log("Visible before folded lines");
|
|
96
|
+
// [!code fold:start]
|
|
97
|
+
function hidden() {
|
|
98
|
+
return "Folded";
|
|
99
|
+
}
|
|
100
|
+
// [!code fold:end]
|
|
101
|
+
console.log("Visible after folded lines");
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
For tail folding, omit `fold:end` and the component will render a bottom control
|
|
105
|
+
to show the remaining lines:
|
|
106
|
+
|
|
107
|
+
```yaml
|
|
108
|
+
services:
|
|
109
|
+
halo:
|
|
110
|
+
image: halohub/halo:2
|
|
111
|
+
# [!code fold:start]
|
|
112
|
+
environment:
|
|
113
|
+
- SPRING_R2DBC_USERNAME=halo
|
|
114
|
+
- SPRING_R2DBC_PASSWORD=openpostgresql
|
|
115
|
+
```
|
|
88
116
|
|
|
89
117
|
For more details on how to use these features, please refer to the [Shiki Transformers documentation](https://shiki.style/packages/transformers).
|
|
90
118
|
|
|
@@ -105,4 +133,4 @@ This component works in all modern browsers that support [Custom Elements v1](ht
|
|
|
105
133
|
|
|
106
134
|
## License
|
|
107
135
|
|
|
108
|
-
[MIT License](https://github.com/halo-sigs/plugin-shiki/blob/main/LICENSE)
|
|
136
|
+
[MIT License](https://github.com/halo-sigs/plugin-shiki/blob/main/LICENSE)
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
//#region ../node_modules/.pnpm/@unocss+reset@66.7.4/node_modules/@unocss/reset/tailwind.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--un-default-border-color,#e5e7eb)}:before,:after{--un-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
|
|
2
3
|
constructor(e, t, n) {
|
|
3
4
|
if (this._$cssResult$ = !0, n !== r) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
|
|
4
5
|
this.cssText = e, this.t = t;
|
|
@@ -65,7 +66,7 @@ var e = "*,:before,:after{box-sizing:border-box;border-style:solid;border-width:
|
|
|
65
66
|
useDefault: !1,
|
|
66
67
|
hasChanged: g
|
|
67
68
|
};
|
|
68
|
-
Symbol.metadata ??= Symbol("metadata"), f.litPropertyMetadata ??= new WeakMap();
|
|
69
|
+
Symbol.metadata ??= Symbol("metadata"), f.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
|
|
69
70
|
var v = class extends HTMLElement {
|
|
70
71
|
static addInitializer(e) {
|
|
71
72
|
this._$Ei(), (this.l ??= []).push(e);
|
|
@@ -117,7 +118,7 @@ var v = class extends HTMLElement {
|
|
|
117
118
|
let t = litPropertyMetadata.get(e);
|
|
118
119
|
if (t !== void 0) for (let [e, n] of t) this.elementProperties.set(e, n);
|
|
119
120
|
}
|
|
120
|
-
this._$Eh = new Map();
|
|
121
|
+
this._$Eh = /* @__PURE__ */ new Map();
|
|
121
122
|
for (let [e, t] of this.elementProperties) {
|
|
122
123
|
let n = this._$Eu(e, t);
|
|
123
124
|
n !== void 0 && this._$Eh.set(n, e);
|
|
@@ -140,16 +141,16 @@ var v = class extends HTMLElement {
|
|
|
140
141
|
super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
|
|
141
142
|
}
|
|
142
143
|
_$Ev() {
|
|
143
|
-
this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
|
|
144
|
+
this._$ES = new Promise(((e) => this.enableUpdating = e)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((e) => e(this)));
|
|
144
145
|
}
|
|
145
146
|
addController(e) {
|
|
146
|
-
(this._$EO ??= new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
|
|
147
|
+
(this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
|
|
147
148
|
}
|
|
148
149
|
removeController(e) {
|
|
149
150
|
this._$EO?.delete(e);
|
|
150
151
|
}
|
|
151
152
|
_$E_() {
|
|
152
|
-
let e = new Map(), t = this.constructor.elementProperties;
|
|
153
|
+
let e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
|
|
153
154
|
for (let n of t.keys()) this.hasOwnProperty(n) && (e.set(n, this[n]), delete this[n]);
|
|
154
155
|
e.size > 0 && (this._$Ep = e);
|
|
155
156
|
}
|
|
@@ -192,7 +193,7 @@ var v = class extends HTMLElement {
|
|
|
192
193
|
!1 === this.isUpdatePending && (this._$ES = this._$EP());
|
|
193
194
|
}
|
|
194
195
|
C(e, t, { useDefault: n, reflect: r, wrapped: i }, a) {
|
|
195
|
-
n && !(this._$Ej ??= new Map()).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), !0 !== i || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || n || (t = void 0), this._$AL.set(e, t)), !0 === r && this._$Em !== e && (this._$Eq ??= new Set()).add(e));
|
|
196
|
+
n && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), !0 !== i || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || n || (t = void 0), this._$AL.set(e, t)), !0 === r && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
|
|
196
197
|
}
|
|
197
198
|
async _$EP() {
|
|
198
199
|
this.isUpdatePending = !0;
|
|
@@ -233,7 +234,7 @@ var v = class extends HTMLElement {
|
|
|
233
234
|
this._$EO?.forEach(((e) => e.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
|
|
234
235
|
}
|
|
235
236
|
_$EM() {
|
|
236
|
-
this._$AL = new Map(), this.isUpdatePending = !1;
|
|
237
|
+
this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
|
|
237
238
|
}
|
|
238
239
|
get updateComplete() {
|
|
239
240
|
return this.getUpdateComplete();
|
|
@@ -250,12 +251,14 @@ var v = class extends HTMLElement {
|
|
|
250
251
|
updated(e) {}
|
|
251
252
|
firstUpdated(e) {}
|
|
252
253
|
};
|
|
253
|
-
v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[m("elementProperties")] = new Map(), v[m("finalized")] = new Map(), ae?.({ ReactiveElement: v }), (f.reactiveElementVersions ??= []).push("2.1.1");
|
|
254
|
+
v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[m("elementProperties")] = /* @__PURE__ */ new Map(), v[m("finalized")] = /* @__PURE__ */ new Map(), ae?.({ ReactiveElement: v }), (f.reactiveElementVersions ??= []).push("2.1.1");
|
|
255
|
+
//#endregion
|
|
256
|
+
//#region ../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js
|
|
254
257
|
var y = globalThis, b = y.trustedTypes, x = b ? b.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, oe = "$lit$", S = `lit$${Math.random().toFixed(9).slice(2)}$`, C = "?" + S, se = `<${C}>`, w = document, T = () => w.createComment(""), E = (e) => e === null || typeof e != "object" && typeof e != "function", D = Array.isArray, ce = (e) => D(e) || typeof e?.[Symbol.iterator] == "function", O = "[ \n\f\r]", k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, A = /-->/g, j = />/g, M = RegExp(`>|${O}(?:([^\\s"'>=/]+)(${O}*=${O}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), le = /'/g, ue = /"/g, N = /^(?:script|style|textarea|title)$/i, P = ((e) => (t, ...n) => ({
|
|
255
258
|
_$litType$: e,
|
|
256
259
|
strings: t,
|
|
257
260
|
values: n
|
|
258
|
-
}))(1), F = Symbol.for("lit-noChange"), I = Symbol.for("lit-nothing"), L = new WeakMap(), R = w.createTreeWalker(w, 129);
|
|
261
|
+
}))(1), F = Symbol.for("lit-noChange"), I = Symbol.for("lit-nothing"), L = /* @__PURE__ */ new WeakMap(), R = w.createTreeWalker(w, 129);
|
|
259
262
|
function z(e, t) {
|
|
260
263
|
if (!D(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
|
|
261
264
|
return x === void 0 ? t : x.createHTML(t);
|
|
@@ -419,7 +422,7 @@ var fe = class {
|
|
|
419
422
|
return this._$AM._$AU;
|
|
420
423
|
}
|
|
421
424
|
constructor(e, t, n, r, i) {
|
|
422
|
-
this.type = 1, this._$AH = I, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(new String()), this.strings = n) : this._$AH = I;
|
|
425
|
+
this.type = 1, this._$AH = I, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = I;
|
|
423
426
|
}
|
|
424
427
|
_$AI(e, t = this, n, r) {
|
|
425
428
|
let i = this.strings, a = !1;
|
|
@@ -503,6 +506,8 @@ var ve = (e, t, n) => {
|
|
|
503
506
|
G._$litElement$ = !0, G.finalized = !0, W.litElementHydrateSupport?.({ LitElement: G });
|
|
504
507
|
var ye = W.litElementPolyfillSupport;
|
|
505
508
|
ye?.({ LitElement: G }), (W.litElementVersions ??= []).push("4.2.1");
|
|
509
|
+
//#endregion
|
|
510
|
+
//#region ../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js
|
|
506
511
|
var be = {
|
|
507
512
|
attribute: !0,
|
|
508
513
|
type: String,
|
|
@@ -511,7 +516,7 @@ var be = {
|
|
|
511
516
|
hasChanged: g
|
|
512
517
|
}, xe = (e = be, t, n) => {
|
|
513
518
|
let { kind: r, metadata: i } = n, a = globalThis.litPropertyMetadata.get(i);
|
|
514
|
-
if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), a.set(n.name, e), r === "accessor") {
|
|
519
|
+
if (a === void 0 && globalThis.litPropertyMetadata.set(i, a = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), a.set(n.name, e), r === "accessor") {
|
|
515
520
|
let { name: r } = n;
|
|
516
521
|
return {
|
|
517
522
|
set(n) {
|
|
@@ -538,6 +543,8 @@ function K(e) {
|
|
|
538
543
|
return t.constructor.createProperty(n, e), r ? Object.getOwnPropertyDescriptor(t, n) : void 0;
|
|
539
544
|
})(e, t, n);
|
|
540
545
|
}
|
|
546
|
+
//#endregion
|
|
547
|
+
//#region ../node_modules/.pnpm/@lit+reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js
|
|
541
548
|
function q(e) {
|
|
542
549
|
return K({
|
|
543
550
|
...e,
|
|
@@ -545,6 +552,8 @@ function q(e) {
|
|
|
545
552
|
attribute: !1
|
|
546
553
|
});
|
|
547
554
|
}
|
|
555
|
+
//#endregion
|
|
556
|
+
//#region ../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directive.js
|
|
548
557
|
var Se = {
|
|
549
558
|
ATTRIBUTE: 1,
|
|
550
559
|
CHILD: 2,
|
|
@@ -589,10 +598,16 @@ var Se = {
|
|
|
589
598
|
};
|
|
590
599
|
J.directiveName = "unsafeHTML", J.resultType = 1;
|
|
591
600
|
var Y = Ce(J);
|
|
601
|
+
//#endregion
|
|
602
|
+
//#region ../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js
|
|
592
603
|
function X(e, t, n) {
|
|
593
604
|
return e ? t(e) : n?.(e);
|
|
594
605
|
}
|
|
595
|
-
|
|
606
|
+
//#endregion
|
|
607
|
+
//#region src/styles/shiki.css?inline
|
|
608
|
+
var Te = ".shiki{--shiki-code-padding:.875em;--shiki-fold-highlight-offset:.5em;--shiki-tail-control-offset:1em;--shiki-fold-accent:#3b82f6d9;--shiki-fold-accent-strong:#3b82f6;--shiki-fold-accent-muted:#3b82f66b;--shiki-fold-background:#60a5fa1a;--shiki-fold-background-hover:#60a5fa29;--shiki-fold-background-muted:#60a5fa14;--shiki-fold-label-color:#93c5fdf2;--shiki-fold-label-border:#60a5fa61;--shiki-fold-label-background:#3b82f629;--shiki-fold-tail-color:#738a94d1;--shiki-fold-tail-gradient-mid:#738a940b;--shiki-fold-tail-gradient-end:#738a9424;--shiki-fold-tail-hover-color:#60a5faeb;--shiki-fold-tail-expanded-color:#60a5fad9;padding:var(--shiki-code-padding);color-scheme:var(--shiki-theme-type,light);overflow-x:auto}@supports (color:color-mix(in srgb, white, black)){.shiki{--shiki-fold-accent:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 54%, transparent);--shiki-fold-accent-strong:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 72%, transparent);--shiki-fold-accent-muted:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 30%, transparent);--shiki-fold-background:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 8%, transparent);--shiki-fold-background-hover:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 12%, transparent);--shiki-fold-background-muted:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 6%, transparent);--shiki-fold-label-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 72%, var(--shiki-theme-bg,transparent));--shiki-fold-label-border:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 22%, transparent);--shiki-fold-label-background:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 10%, transparent);--shiki-fold-tail-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 58%, var(--shiki-theme-bg,transparent));--shiki-fold-tail-gradient-mid:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 3%, transparent);--shiki-fold-tail-gradient-end:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 9%, transparent);--shiki-fold-tail-hover-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 76%, var(--shiki-theme-bg,transparent));--shiki-fold-tail-expanded-color:color-mix(in srgb, var(--shiki-theme-fg,currentColor) 68%, var(--shiki-theme-bg,transparent))}}code{z-index:0;width:max-content;min-width:100%;font-size:var(--font-size,.875em);counter-reset:step;counter-increment:step 0;display:block;position:relative}code .line:before{content:counter(step);counter-increment:step;text-align:right;color:#738a9480;width:1rem;margin-right:1.5rem;display:inline-block}code .line:last-child:empty{display:none}code .line:last-child:has(>span:empty:only-child){display:none}.has-diff .diff,.has-highlighted .highlighted{width:100%;display:inline-block;position:relative}.has-diff .diff.remove:before{content:\"-\"}.has-diff .diff.add:before{content:\"+\"}.has-diff .diff.remove:after{content:\"\";z-index:-1;background:#ef444426;border-left:1px solid #ef4444cc;position:absolute;inset:0 -.875em}.has-diff .diff.add:after{content:\"\";z-index:-1;background:#22c55e26;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-focused .line:not(.focused){opacity:.7;filter:blur(.095rem);transition:filter .35s,opacity .35s}.has-focused:hover .line:not(.focused){opacity:1;filter:blur()}.has-highlighted .highlighted:after{content:\"\";z-index:-1;background:#65758529;border-left:1px solid #22c55ecc;position:absolute;inset:0 -.875em}.has-highlighted .highlighted.error:after{background:#f43f5e29!important;border-left:1px solid #f43f5ecc!important}.has-highlighted .highlighted.warning:after{background:#eab30829!important;border-left:1px solid #eab308cc!important}.has-highlighted .highlighted.info:after{background:#65758529!important;border-left:1px solid #657585cc!important}.has-fold code .line{display:block}.has-fold .fold-line{width:100%}.has-fold .fold-start{cursor:pointer;box-sizing:border-box;width:calc(100% + var(--shiki-fold-highlight-offset) + var(--shiki-fold-highlight-offset));margin-left:calc(0px - var(--shiki-fold-highlight-offset));padding-left:var(--shiki-fold-highlight-offset);background:var(--shiki-fold-background);box-shadow:inset 3px 0 var(--shiki-fold-accent);border-radius:.375rem;transition:background .2s,box-shadow .2s}.has-fold .fold-start:hover{background:var(--shiki-fold-background-hover);box-shadow:inset 3px 0 var(--shiki-fold-accent-strong)}.has-fold .fold-start:focus-visible{outline:2px solid var(--shiki-fold-accent);outline-offset:2px}.has-fold .fold-start:after{content:\"▸ \" attr(data-fold-lines) \" lines hidden\";border:1px solid var(--shiki-fold-label-border);color:var(--shiki-fold-label-color);background:var(--shiki-fold-label-background);font-weight:600;line-height:1.5;font-size:var(--font-size,.875em);border-radius:999px;align-items:center;margin-left:1rem;padding:.0625rem .5rem;display:inline-flex;box-shadow:0 1px 2px #00000029}.has-fold .fold-start.fold-expanded:after{content:\"▾ collapse\";opacity:.75}.has-fold .fold-start.fold-expanded:has(+.fold-hidden.fold-expanded:not(.fold-tail-line)){border-bottom-right-radius:0;border-bottom-left-radius:0}.has-fold .fold-hidden.fold-expanded:not(.fold-tail-line){box-sizing:border-box;width:calc(100% + var(--shiki-fold-highlight-offset) + var(--shiki-fold-highlight-offset));margin-left:calc(0px - var(--shiki-fold-highlight-offset));padding-left:var(--shiki-fold-highlight-offset);background:var(--shiki-fold-background-muted);box-shadow:inset 3px 0 var(--shiki-fold-accent-muted)}.has-fold .fold-hidden.fold-expanded:not(.fold-tail-line):not(:has(+.fold-hidden.fold-expanded:not(.fold-tail-line))){border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.has-fold .fold-hidden:not(.fold-expanded){opacity:0;pointer-events:none;height:0;line-height:0;display:block;overflow:hidden}.has-fold .fold-hidden:not(.fold-expanded) *{line-height:0}.has-fold-tail{padding-bottom:0}.has-fold-tail .fold-tail-control{z-index:1;width:calc(100% + var(--shiki-tail-control-offset) + var(--shiki-tail-control-offset));box-sizing:border-box;min-height:1.5rem;margin:0 0 0 calc(0px - var(--shiki-tail-control-offset));cursor:pointer;background:0 0;border-top:0;justify-content:center;align-items:center;transition:color .2s;display:flex;position:relative;box-shadow:0 -.5rem 1.25rem #0f172a0f;color:var(--shiki-fold-tail-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-color)!important}.has-fold-tail .fold-tail-control:before{content:\"\";pointer-events:none;background:linear-gradient(to bottom, transparent, var(--shiki-fold-tail-gradient-mid) 42%, var(--shiki-fold-tail-gradient-end));height:3.5rem;position:absolute;bottom:0;left:0;right:0}.has-fold-tail .fold-tail-label{z-index:1;border-radius:999px;justify-content:center;align-items:center;gap:.375rem;min-width:7.5rem;padding:.0625rem .5rem;font-size:.875em;font-weight:500;line-height:1.35;display:inline-flex;position:relative}.has-fold-tail .fold-tail-icon{flex:0 0 .75rem;justify-content:center;align-items:center;width:.75rem;height:1em;font-size:.8125em;line-height:1;display:inline-flex}.has-fold-tail .fold-tail-control .fold-tail-label,.has-fold-tail .fold-tail-control .fold-tail-icon,.has-fold-tail .fold-tail-control .fold-tail-text{color:inherit!important;-webkit-text-fill-color:inherit!important}.has-fold-tail .fold-tail-label-expanded{display:none}.has-fold-tail .fold-tail-control:hover{color:var(--shiki-fold-tail-hover-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-hover-color)!important}.has-fold-tail .fold-tail-control:focus-visible{outline:2px solid var(--shiki-fold-accent);outline-offset:-3px}.has-fold-tail .fold-tail-control.fold-expanded{color:var(--shiki-fold-tail-expanded-color)!important;-webkit-text-fill-color:var(--shiki-fold-tail-expanded-color)!important}.has-fold-tail .fold-tail-control.fold-expanded:before,.has-fold-tail .fold-tail-control.fold-expanded .fold-tail-label-collapsed{display:none}.has-fold-tail .fold-tail-control.fold-expanded .fold-tail-label-expanded{display:inline-flex}:host([color-scheme=dark]) .shiki,:host([color-scheme=dark]) .shiki span{color:var(--shiki-dark)!important}:host([color-scheme=dark]) .shiki{background-color:var(--shiki-dark-bg)!important}";
|
|
609
|
+
//#endregion
|
|
610
|
+
//#region src/utils/copy-to-clipboard.ts
|
|
596
611
|
function Ee(e, t) {
|
|
597
612
|
if (navigator.clipboard) navigator.clipboard.writeText(e).then(() => {
|
|
598
613
|
t();
|
|
@@ -608,12 +623,16 @@ function Ee(e, t) {
|
|
|
608
623
|
document.body.removeChild(n);
|
|
609
624
|
}
|
|
610
625
|
}
|
|
626
|
+
//#endregion
|
|
627
|
+
//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
|
|
611
628
|
function Z(e, t, n, r) {
|
|
612
629
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
613
630
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
614
631
|
else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
|
|
615
632
|
return i > 3 && a && Object.defineProperty(t, n, a), a;
|
|
616
633
|
}
|
|
634
|
+
//#endregion
|
|
635
|
+
//#region src/variants/base.ts
|
|
617
636
|
var Q = class extends G {
|
|
618
637
|
constructor(...e) {
|
|
619
638
|
super(...e), this.options = {
|
|
@@ -625,22 +644,45 @@ var Q = class extends G {
|
|
|
625
644
|
}, this.copied = !1;
|
|
626
645
|
}
|
|
627
646
|
updated(e) {
|
|
628
|
-
e.has("options") && (this.setAttribute("color-scheme", this.options.colorScheme), this.style.setProperty("--shiki-theme-type", this.options.theme?.type || "light"), this.style.setProperty("--font-size", this.options.fontSize || "0.875em"));
|
|
647
|
+
e.has("options") && (this.setAttribute("color-scheme", this.options.colorScheme), this.style.setProperty("--shiki-theme-type", this.options.theme?.type || "light"), this.style.setProperty("--shiki-theme-fg", this.options.theme?.fg || "currentColor"), this.style.setProperty("--shiki-theme-bg", this.options.theme?.bg || "transparent"), this.style.setProperty("--font-size", this.options.fontSize || "0.875em"));
|
|
629
648
|
}
|
|
630
649
|
handleCopyCode() {
|
|
631
|
-
let e = this.shadowRoot?.querySelector("pre");
|
|
632
|
-
Ee(
|
|
650
|
+
let e = this.shadowRoot?.querySelector("pre"), t = e?.querySelectorAll("code > .line");
|
|
651
|
+
Ee((t?.length ? Array.from(t).map((e) => e.textContent || "").join("\n") : e?.textContent) || "", () => {
|
|
633
652
|
this.copied = !0, setTimeout(() => {
|
|
634
653
|
this.copied = !1;
|
|
635
654
|
}, 2e3);
|
|
636
655
|
});
|
|
637
656
|
}
|
|
657
|
+
handleCodeBlockClick(e) {
|
|
658
|
+
if (!(e.target instanceof Element)) return;
|
|
659
|
+
let t = e.target.closest(".fold-start, .fold-tail-control");
|
|
660
|
+
t && this.toggleFold(t);
|
|
661
|
+
}
|
|
662
|
+
handleCodeBlockKeydown(e) {
|
|
663
|
+
if (!(e.target instanceof Element) || e.key !== "Enter" && e.key !== " ") return;
|
|
664
|
+
let t = e.target.closest(".fold-start, .fold-tail-control");
|
|
665
|
+
t && (e.preventDefault(), this.toggleFold(t));
|
|
666
|
+
}
|
|
667
|
+
toggleFold(e) {
|
|
668
|
+
let t = e.dataset.foldId, n = e.closest("pre");
|
|
669
|
+
if (!t || !n) return;
|
|
670
|
+
let r = e.getAttribute("aria-expanded") !== "true";
|
|
671
|
+
for (let e of n.querySelectorAll(".fold-line")) e.dataset.foldId === t && (e.classList.toggle("fold-expanded", r), e.classList.contains("fold-hidden") && e.setAttribute("aria-hidden", String(!r)));
|
|
672
|
+
e.classList.toggle("fold-expanded", r), e.setAttribute("aria-expanded", String(r));
|
|
673
|
+
}
|
|
638
674
|
};
|
|
639
675
|
Z([K({ type: Object })], Q.prototype, "options", void 0), Z([q()], Q.prototype, "copied", void 0);
|
|
676
|
+
//#endregion
|
|
677
|
+
//#region src/variants/simple.ts
|
|
640
678
|
var De = class extends Q {
|
|
641
679
|
render() {
|
|
642
680
|
return P`
|
|
643
|
-
<div
|
|
681
|
+
<div
|
|
682
|
+
class="shadow rounded-lg relative group"
|
|
683
|
+
@click=${this.handleCodeBlockClick}
|
|
684
|
+
@keydown=${this.handleCodeBlockKeydown}
|
|
685
|
+
>
|
|
644
686
|
${Y(this.options.html)}
|
|
645
687
|
<div
|
|
646
688
|
class="absolute select-none top-1 text-xs right-2 group-hover:opacity-0 transition-opacity"
|
|
@@ -699,13 +741,19 @@ var De = class extends Q {
|
|
|
699
741
|
}
|
|
700
742
|
};
|
|
701
743
|
customElements.get("shiki-code-simple-variant") || customElements.define("shiki-code-simple-variant", De);
|
|
744
|
+
//#endregion
|
|
745
|
+
//#region src/variants/mac.ts
|
|
702
746
|
var Oe = class extends Q {
|
|
703
747
|
constructor(...e) {
|
|
704
748
|
super(...e), this.fold = !1;
|
|
705
749
|
}
|
|
706
750
|
render() {
|
|
707
751
|
return P`
|
|
708
|
-
<div
|
|
752
|
+
<div
|
|
753
|
+
class="shadow rounded-lg overflow-hidden relative group"
|
|
754
|
+
@click=${this.handleCodeBlockClick}
|
|
755
|
+
@keydown=${this.handleCodeBlockKeydown}
|
|
756
|
+
>
|
|
709
757
|
<header
|
|
710
758
|
class="flex items-center h-10 justify-between px-4.5 opacity-95"
|
|
711
759
|
style="background-color: ${this.options.theme?.bg};"
|
|
@@ -782,6 +830,8 @@ var Oe = class extends Q {
|
|
|
782
830
|
}
|
|
783
831
|
};
|
|
784
832
|
Z([q()], Oe.prototype, "fold", void 0), customElements.get("shiki-code-mac-variant") || customElements.define("shiki-code-mac-variant", Oe);
|
|
833
|
+
//#endregion
|
|
834
|
+
//#region src/shiki-code.ts
|
|
785
835
|
var $ = class extends G {
|
|
786
836
|
constructor(...e) {
|
|
787
837
|
super(...e), this.lightTheme = "github-light", this.darkTheme = "github-dark", this.variant = "simple", this.fontSize = "0.875em", this.loading = !0, this.html = "", this.languageCode = "", this.languageName = "", this.lightThemeRegistration = null, this.darkThemeRegistration = null, this.code = "", this.copied = !1, this.error = "", this._observer = null, this._media = null, this._colorScheme = "light";
|
|
@@ -835,9 +885,15 @@ var $ = class extends G {
|
|
|
835
885
|
}
|
|
836
886
|
async process(e) {
|
|
837
887
|
try {
|
|
838
|
-
this.languageCode = this.extractLanguageCode(e.classList) || "plaintext", this.languageCode === "auto" && (this.languageCode = "plaintext"), this.languageCode === "text" && (this.languageCode = "plaintext"), this.code = e.textContent || ""
|
|
839
|
-
let
|
|
840
|
-
this.
|
|
888
|
+
this.languageCode = this.extractLanguageCode(e.classList) || "plaintext", this.languageCode === "auto" && (this.languageCode = "plaintext"), this.languageCode === "text" && (this.languageCode = "plaintext"), this.code = e.textContent || "";
|
|
889
|
+
let t = await this.renderCodeAsHtml(this.code || "", this.languageCode);
|
|
890
|
+
this.html = t;
|
|
891
|
+
let { getSingletonHighlighter: n } = await import("shiki"), r = await n();
|
|
892
|
+
if (this.languageCode !== "plaintext") {
|
|
893
|
+
let e = r.getLanguage(this.languageCode);
|
|
894
|
+
this.languageName = e.name;
|
|
895
|
+
} else this.languageName = "plaintext";
|
|
896
|
+
this.lightThemeRegistration = r.getTheme(this.lightTheme), this.darkThemeRegistration = r.getTheme(this.darkTheme || this.lightTheme);
|
|
841
897
|
} catch (e) {
|
|
842
898
|
e instanceof Error && (this.error = e.message);
|
|
843
899
|
} finally {
|
|
@@ -858,7 +914,7 @@ var $ = class extends G {
|
|
|
858
914
|
return null;
|
|
859
915
|
}
|
|
860
916
|
async renderCodeAsHtml(e, t) {
|
|
861
|
-
let { codeToHtml: n } = await import("shiki"), { transformerNotationDiff: r, transformerNotationHighlight: i, transformerNotationFocus: a, transformerNotationErrorLevel: o } = await import("@shikijs/transformers");
|
|
917
|
+
let { codeToHtml: n } = await import("shiki"), { transformerNotationDiff: r, transformerNotationHighlight: i, transformerNotationFocus: a, transformerNotationErrorLevel: o } = await import("@shikijs/transformers"), { transformerNotationFold: s } = await import("./notation-fold-LJHA_uH-.js");
|
|
862
918
|
return await n(e, {
|
|
863
919
|
lang: t,
|
|
864
920
|
themes: {
|
|
@@ -869,7 +925,8 @@ var $ = class extends G {
|
|
|
869
925
|
r(),
|
|
870
926
|
i(),
|
|
871
927
|
a(),
|
|
872
|
-
o()
|
|
928
|
+
o(),
|
|
929
|
+
s()
|
|
873
930
|
]
|
|
874
931
|
});
|
|
875
932
|
}
|
|
@@ -902,4 +959,5 @@ Z([K({
|
|
|
902
959
|
type: String,
|
|
903
960
|
attribute: "font-size"
|
|
904
961
|
})], $.prototype, "fontSize", void 0), Z([q()], $.prototype, "loading", void 0), Z([q()], $.prototype, "html", void 0), Z([q()], $.prototype, "languageCode", void 0), Z([q()], $.prototype, "languageName", void 0), Z([q()], $.prototype, "lightThemeRegistration", void 0), Z([q()], $.prototype, "darkThemeRegistration", void 0), Z([q()], $.prototype, "code", void 0), Z([q()], $.prototype, "copied", void 0), Z([q()], $.prototype, "error", void 0), Z([q()], $.prototype, "_colorScheme", void 0), customElements.get("shiki-code") || customElements.define("shiki-code", $);
|
|
962
|
+
//#endregion
|
|
905
963
|
export { $ as ShikiCode };
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { createCommentNotationTransformer as e } from "@shikijs/transformers";
|
|
2
|
+
//#region src/transformers/notation-fold.ts
|
|
3
|
+
function t(e) {
|
|
4
|
+
return e.type === "element";
|
|
5
|
+
}
|
|
6
|
+
function n() {
|
|
7
|
+
let n = null, r = null, i = 0, a = !1, o = e("@halo-dev/shiki-code-element:notation-fold", /#?\s*\[!code fold:(start|end)\]/gi, function([, e], t, o, s, c) {
|
|
8
|
+
let l = s.indexOf(t);
|
|
9
|
+
if (e.toLowerCase() === "start") return n = c, r = s[c] || null, !0;
|
|
10
|
+
if (n === null) return !0;
|
|
11
|
+
let u = c === l ? l + 1 : l;
|
|
12
|
+
if (u <= n) return n = null, !0;
|
|
13
|
+
let d = String(i++), f = Math.max(u - n - 1, 0);
|
|
14
|
+
for (let e = n; e < u; e++) this.addClassToHast(s[e], ["fold-line", e === n ? "fold-start" : "fold-hidden"]), s[e].properties["data-fold-id"] = d, e === n ? (s[e].properties.role = "button", s[e].properties.tabindex = "0", s[e].properties["aria-expanded"] = "false", s[e].properties["aria-label"] = `Toggle folded code block with ${f} hidden lines`, s[e].properties["data-fold-lines"] = String(f)) : s[e].properties["aria-hidden"] = "true";
|
|
15
|
+
return this.addClassToHast(this.pre, "has-fold"), n = null, r = null, a = !0, !0;
|
|
16
|
+
}, void 0), s = o.code;
|
|
17
|
+
return {
|
|
18
|
+
...o,
|
|
19
|
+
code(e) {
|
|
20
|
+
if (n = null, r = null, i = 0, a = !1, s?.call(this, e), r) {
|
|
21
|
+
let n = e.children.filter(t), o = n.indexOf(r);
|
|
22
|
+
if (o !== -1 && o < n.length) {
|
|
23
|
+
let t = String(i++), r = n.length - o, s = {
|
|
24
|
+
type: "element",
|
|
25
|
+
tagName: "span",
|
|
26
|
+
properties: {
|
|
27
|
+
class: ["fold-tail-control"],
|
|
28
|
+
role: "button",
|
|
29
|
+
tabindex: "0",
|
|
30
|
+
"aria-expanded": "false",
|
|
31
|
+
"aria-label": `Show ${r} folded lines`,
|
|
32
|
+
"data-fold-id": t,
|
|
33
|
+
"data-fold-lines": String(r)
|
|
34
|
+
},
|
|
35
|
+
children: [{
|
|
36
|
+
type: "element",
|
|
37
|
+
tagName: "span",
|
|
38
|
+
properties: { class: ["fold-tail-label", "fold-tail-label-collapsed"] },
|
|
39
|
+
children: [{
|
|
40
|
+
type: "element",
|
|
41
|
+
tagName: "span",
|
|
42
|
+
properties: {
|
|
43
|
+
class: ["fold-tail-icon"],
|
|
44
|
+
"aria-hidden": "true"
|
|
45
|
+
},
|
|
46
|
+
children: [{
|
|
47
|
+
type: "text",
|
|
48
|
+
value: "▾"
|
|
49
|
+
}]
|
|
50
|
+
}, {
|
|
51
|
+
type: "element",
|
|
52
|
+
tagName: "span",
|
|
53
|
+
properties: { class: ["fold-tail-text"] },
|
|
54
|
+
children: [{
|
|
55
|
+
type: "text",
|
|
56
|
+
value: `Show ${r} more lines`
|
|
57
|
+
}]
|
|
58
|
+
}]
|
|
59
|
+
}, {
|
|
60
|
+
type: "element",
|
|
61
|
+
tagName: "span",
|
|
62
|
+
properties: { class: ["fold-tail-label", "fold-tail-label-expanded"] },
|
|
63
|
+
children: [{
|
|
64
|
+
type: "element",
|
|
65
|
+
tagName: "span",
|
|
66
|
+
properties: {
|
|
67
|
+
class: ["fold-tail-icon"],
|
|
68
|
+
"aria-hidden": "true"
|
|
69
|
+
},
|
|
70
|
+
children: [{
|
|
71
|
+
type: "text",
|
|
72
|
+
value: "▴"
|
|
73
|
+
}]
|
|
74
|
+
}, {
|
|
75
|
+
type: "element",
|
|
76
|
+
tagName: "span",
|
|
77
|
+
properties: { class: ["fold-tail-text"] },
|
|
78
|
+
children: [{
|
|
79
|
+
type: "text",
|
|
80
|
+
value: "Collapse"
|
|
81
|
+
}]
|
|
82
|
+
}]
|
|
83
|
+
}]
|
|
84
|
+
};
|
|
85
|
+
for (let e = o; e < n.length; e++) this.addClassToHast(n[e], [
|
|
86
|
+
"fold-line",
|
|
87
|
+
"fold-hidden",
|
|
88
|
+
"fold-tail-line"
|
|
89
|
+
]), n[e].properties["data-fold-id"] = t, n[e].properties["aria-hidden"] = "true";
|
|
90
|
+
let c = e.children.indexOf(n[n.length - 1]);
|
|
91
|
+
e.children.splice(c + 1, 0, s), this.addClassToHast(this.pre, ["has-fold", "has-fold-tail"]), a = !0;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
a && (e.children = e.children.filter((e) => !(e.type === "text" && e.value === "\n")));
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
//#endregion
|
|
99
|
+
export { n as transformerNotationFold };
|
package/dist/variants/base.d.ts
CHANGED
|
@@ -5,4 +5,7 @@ export declare class ShikiCodeBaseVariant extends LitElement {
|
|
|
5
5
|
copied: boolean;
|
|
6
6
|
protected updated(_changedProperties: PropertyValues): void;
|
|
7
7
|
handleCopyCode(): void;
|
|
8
|
+
handleCodeBlockClick(event: Event): void;
|
|
9
|
+
handleCodeBlockKeydown(event: KeyboardEvent): void;
|
|
10
|
+
private toggleFold;
|
|
8
11
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@halo-dev/shiki-code-element",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/halo-sigs/plugin-shiki.git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"dist"
|
|
22
22
|
],
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"lit": "^3.3.
|
|
24
|
+
"lit": "^3.3.3"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@iconify-json/mingcute": "^1.2.7",
|
|
28
|
-
"@iconify-json/tabler": "^1.2.
|
|
29
|
-
"@unocss/reset": "^66.
|
|
30
|
-
"unocss": "^66.
|
|
31
|
-
"vite-plugin-dts": "^
|
|
28
|
+
"@iconify-json/tabler": "^1.2.35",
|
|
29
|
+
"@unocss/reset": "^66.7.4",
|
|
30
|
+
"unocss": "^66.7.4",
|
|
31
|
+
"vite-plugin-dts": "^5.0.3"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@shikijs/transformers": "^3 || ^4",
|