如何在 HTML 文字區域中新增行號？

向HTML Textarea 新增行號：指南

處理 時HTML 中的元素，在文字旁邊顯示行號對於可讀性和編輯準確性來說是一個很有價值的功能。讓我們探索此任務的全面解決方案。

CodeMirror

在文字區域中新增行號最推薦的工具是 CodeMirror。它是一個流行的開源 JavaScript 庫，提供了廣泛的文字編輯功能。要使用 CodeMirror，只需包含該程式庫並使用適當的選項實例化它即可。

即時示​​範

這是一個示範如何使用 CodeMirror 進行行編號的工作示範：

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    mode: 'text/x-perl',
    theme: 'abbott',
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css">

<textarea>

額外提示

如果您遇到行號與實際行不匹配的問題，則可能是您顯示器的每英寸點數(DPI ) 設定高於100%。 CodeMirror 考慮到了這一點，但其他解決方案可能不會。

結論

CodeMirror 是一種可靠且強大的解決方案，用於在 HTML 中的文字區域中新增行號。它提供了一系列自訂選項，並與 HTML 元素無縫整合。

以上是如何在 HTML 文字區域中新增行號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！