如何使用 CodeMirror 將行號新增至 HTML 文字區域？

如何在HTML 文字區域中加入行號

在此StackOverflow 討論中，使用者尋求一種為HTML 文字區域新增行號的解決方案文字區域元素的左邊距。使用者提供了以下程式碼片段：

<textarea name="program"></textarea>

雖然建議的 CodeMirror 函式庫提供了有效的解決方案，但其技術細節卻出現了問題。

CodeMirror：強大的文字Editor

CodeMirror 是一款多功能文字編輯器，可無縫整合到 Web 應用程式中。要將其合併到文字區域中，只需按照以下步驟操作：

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

此程式碼片段在 ID 為「code」的元素中初始化 CodeMirror 實例。 “lineNumbers”選項啟用行號顯示，“mode”和“theme”選項分別自訂程式碼突出顯示和主題。

演示和文件

有關工作演示，請參閱以下程式碼片段：

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

<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css">

<textarea></textarea>

以了解更多詳細資訊和進階自訂選項，請瀏覽https://codemirror.net/doc/ 上的綜合文件。

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