如何在 HTML 文字區域中新增行號？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-11-24 13:14:11

原創

428 人瀏覽過

How to Add Line Numbers to an HTML Textarea?

HTML 文字區域的行號增強

問題：行號如何顯示在左邊距元素？

答案：

CodeMirror 簡介

社群成員強烈推薦CodeMirror，這是一個強大的工具，擅長顯示線條

實作

CodeMirror 提供輕鬆整合。透過實作以下程式碼將其合併到您的專案中：

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

登入後複製

在此範例中：

lineNumbers 屬性啟用行編號。
mode 指定語法Perl 的突出顯示。
主題將編輯器的外觀設定為「Abbott」樣式。

演示

在 StackOverflow 沙箱中體驗帶有行號的 CodeMirror 的完整功能演示：

<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 設定造成的。然而，CodeMirror 可以有效地處理這些情況。

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