首頁 > web前端 > css教學 > 如何在 HTML 文字區域中新增行號?

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

Mary-Kate Olsen
發布: 2024-11-15 09:45:02
原創
1036 人瀏覽過

How can I add line numbers to an HTML textarea?

向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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板