如何使用 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中文网其他相关文章！