向HTML Textarea 新增行號:指南
處理
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中文網其他相關文章!