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

HTML テキストエリアの行番号の拡張

質問: 行番号をテキストエリアの左余白に表示するにはどうすればよいですか? <テキストエリア> element?

回答:

CodeMirror の紹介

コミュニティのメンバーによって強く推奨されているのは、CodeMirror です。ラインの表示に優れています

実装

CodeMirror は簡単な統合を提供します。次のコードを実装して、これをプロジェクトに組み込みます:

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

この例:

• lineNumbers プロパティにより行番号付けが有効になります。
• mode は構文を指定します。 Perl の強調表示。
• テーマはエディタの外観を「Abbott」に設定しますstyle.

デモ

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 中国語 Web サイトの他の関連記事を参照してください。