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

HTML テキストエリアへの行番号の追加: ガイド

を扱う場合HTML の要素では、テキストの横に行番号を表示することは、読みやすさと編集の正確さを保つために重要な機能です。このタスクに対する包括的なソリューションを検討してみましょう。

CodeMirror

テキストエリアに行番号を追加するための最も推奨されるツールは CodeMirror です。これは、テキスト編集のための幅広い機能を提供する人気のあるオープンソース JavaScript ライブラリです。 CodeMirror を使用するには、ライブラリをインクルードし、適切なオプションを使用してインスタンス化するだけです。

ライブ デモ

これは、行番号付けに CodeMirror を使用する方法を示す実際のデモです。

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

<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></textarea>

追加ヒント

行番号が実際の行と一致しないという問題に直面している場合は、モニターの 1 インチあたりのドット数 (DPI) が 100% より高く設定されている可能性があります。 CodeMirror はこれを考慮しますが、他のソリューションは考慮しない場合があります。

結論

CodeMirror は、HTML のテキストエリアに行番号を追加するための信頼できる強力なソリューションです。幅広いカスタマイズ オプションが提供され、HTML 要素とシームレスに統合されます。

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