我做了一些研究，發現了多種方法：
- 使用背景圖像（TinyMCE 就是這樣做的，使用 PNG）
- 使用
- ;有序列表。
我一個都不喜歡！第一個看起來不清晰 - 並且與我已經為我的
第二個需要一堆 JavaScript 來維護有序列表：動態新增/刪除
所以我最後創建了一個混合體。
它是動態產生的 SVG，儲存為 CSS 自訂屬性 — 並用作背景圖像，從其父
讓我們開始吧。
JavaScript
一、main方法：
lineNumbers(element, numLines = 50, inline = false)
元素是
接下來，我們為自訂屬性定義一個前綴：
const prefix = '--linenum-';
在繼續之前，我們檢查是否重新使用任何現有財產：
if (!inline) {
const styleString = document.body.getAttribute('style') || '';
const regex = new RegExp(`${prefix}[^:]*`, 'g');
const match = styleString.match(regex);
if (match) {
element.style.backgroundImage = `var(${match[0]})`;
return;
}
}
接下來，我們從元素中提取樣式，使用相同的字體系列、字體大小、行高等渲染 SVG。 :
const bgColor = getComputedStyle(element).borderColor; const fillColor = getComputedStyle(element).color; const fontFamily = getComputedStyle(element).fontFamily; const fontSize = parseFloat(getComputedStyle(element).fontSize); const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize; const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2; const translateY = (fontSize * lineHeight).toFixed(2);
我們的財產也需要一個隨機 ID：
const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`;
現在是時候渲染 SVG 了：
const svg = `<svg xmlns="http://www.w3.org/2000/svg">
<style>
svg { background: ${bgColor}; }
text {
fill: hsl(from ${fillColor} h s l / 50%);
font-family: ${fontFamily};
font-size: ${fontSize}px;
line-height: ${lineHeight};
text-anchor: end;
translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px);
}
</style>
${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")}
</svg>`;
讓我們來分解一下：
在
最後一部分迭代從 numLines 建立的數組，並將
我們快到了！
要將產生的 SVG 用作 url() 屬性，我們需要對其進行編碼：
const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
最後，我們在元素或文件主體上設定該屬性：
const target = inline ? element : document.body;
target.style.setProperty(id, encodedURI);
element.style.backgroundImage = `var(${id})`;
就是這樣！
還不錯，只有 610 字節，經過縮小和壓縮！
示範
您可以在此處查看演示，並在此處下載完整腳本。
下面是一個簡化的 Codepen，未使用內嵌屬性邏輯：
優點和缺點
有優點和缺點嗎？當然有！
就我個人而言，對於我目前的項目，我需要一種簡單、清晰的方法來將行號添加到
優點
減少 DOM 操作
此方法不依賴操作 DOM。行號產生為單一 SVG，儲存在 CSS 自訂屬性中。
自動同步
由於行號是背景圖像的一部分，它們會自動隨文字內容滾動，而無需手動同步邏輯。
跨元素的可重複使用性
透過將產生的 SVG 儲存在 CSS 自訂屬性中，它可以在多個元素之間重複使用。這意味著如果多個元素需要相同的行號，它們都可以引用相同的自訂屬性，從而避免冗餘的 SVG 生成。
可擴展性
SVG 的向量特性確保行號在任何縮放等級下都保持清晰。
缺點
無障礙
螢幕閱讀器和輔助技術更容易存取有序列表，而基於 SVG 的行號可能會被忽略或誤解。
客製化複雜性
對有序列表中的各個行號進行樣式設計和互動非常簡單。相較之下，SVG 方法使得自訂或向特定行號添加互動性變得更加困難。
瀏覽器相容性
SVG 和 CSS 自訂屬性可能無法在所有瀏覽器中一致地呈現 - 目前的實作在 Safari 中存在問題，我們需要從 translateY 中扣除 (paddingTop / 10)。
動態內容處理
有序列表可以更靈活地處理動態內容更新，例如新增或刪除行，而 SVG 方法可能需要重新產生並重新套用整個背景圖像。
以上是使用 SVG 的