this.language = Array.from(this.codeContainer.classList)
.find((klass) => /^language-([a-z0-9_-]+)$/.test(klass))
?.replace(/^language-/, "");
-
- this.calculateLineNumberWidth();
}
public static processAll(): void {
this.container.classList.remove("highlighting");
this.container.classList.add("highlighted");
}
-
- private calculateLineNumberWidth(): void {
- if (!this.codeContainer) {
- return;
- }
-
- let maxLength = 0;
- this.codeContainer.querySelectorAll(".lineAnchor").forEach((anchor: HTMLAnchorElement) => {
- const length = anchor.title.length;
- if (length > maxLength) {
- maxLength = length;
- }
- });
-
- // Clamp the max length to 6 (up to line 999,999) to prevent layout issues.
- if (maxLength > 6) {
- maxLength = 6;
- }
-
- this.container.style.setProperty("--line-number-width", maxLength.toString());
- }
}
export = Code;
this.codeContainer = this.container.querySelector(".codeBoxCode > code");
this.language = (_a = Array.from(this.codeContainer.classList)
.find((klass) => /^language-([a-z0-9_-]+)$/.test(klass))) === null || _a === void 0 ? void 0 : _a.replace(/^language-/, "");
- this.calculateLineNumberWidth();
}
static processAll() {
document.querySelectorAll(".codeBox:not([data-processed])").forEach((codeBox) => {
this.container.classList.remove("highlighting");
this.container.classList.add("highlighted");
}
- calculateLineNumberWidth() {
- if (!this.codeContainer) {
- return;
- }
- let maxLength = 0;
- this.codeContainer.querySelectorAll(".lineAnchor").forEach((anchor) => {
- const length = anchor.title.length;
- if (length > maxLength) {
- maxLength = length;
- }
- });
- // Clamp the max length to 6 (up to line 999,999) to prevent layout issues.
- if (maxLength > 6) {
- maxLength = 6;
- }
- this.container.style.setProperty("--line-number-width", maxLength.toString());
- }
}
Code.chunkSize = 50;
return Code;
.codeBoxCode {
position: relative;
- padding-left: calc((var(--line-number-width, 6) + 1) * 1ch);
+ padding-left: 7ch;
> code {
display: block;
display: block;
> a {
- margin-left: calc((var(--line-number-width, 6) + 1) * -1ch);
+ margin-left: -7ch;
overflow: hidden;
position: absolute;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
- width: calc(var(--line-number-width, 6) * 1ch);
+ /* No one has line numbers greater than 999999 */
+ width: 6ch;
&::before {
content: attr(title);