如何使用 CodeMirror 将行号添加到 HTML 文本区域？-css教程-PHP中文网

演示和文档

首页

web前端

css教程

如何使用 CodeMirror 将行号添加到 HTML 文本区域？

Nov 12, 2024 am 07:12 AM

How do I add line numbers to an HTML textarea using CodeMirror?

<h2>如何向 HTML 文本区域添加行号</h2>

在此 StackOverflow 讨论中，用户寻求一种向 HTML 文本区域添加行号的解决方案文本区域元素的左边距。用户提供了以下代码片段：

&lt;TEXTAREA name=&quot;program&quot;>

登录后复制

虽然推荐的 CodeMirror 库提供了有效的解决方案，但其技术细节却出现了问题。

CodeMirror：强大的文本Editor</h3>

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',
});

登录后复制

&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js&quot;&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js&quot;&gt;&lt;/script&gt;

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css&quot;&gt;

&lt;textarea&gt;

登录后复制

了解更多详细信息和高级自定义选项，请浏览 https://codemirror.net/doc/ 上的综合文档。

以上是如何使用 CodeMirror 将行号添加到 HTML 文本区域？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn