CodeMirror を使用して HTML テキストエリアに行番号を追加するにはどうすればよいですか?

HTML テキストエリアに行番号を追加する方法

この StackOverflow ディスカッションで、ユーザーは、HTML テキストエリアに行番号を追加するためのソリューションを探しました。 textarea要素の左マージン。ユーザーは次のコード スニペットを提供しました:

<TEXTAREA name="program">

推奨される 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>

詳細と高度なカスタマイズ オプションについては、https://codemirror.net/doc/ で包括的なドキュメントを参照してください。

以上がCodeMirror を使用して HTML テキストエリアに行番号を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。