HTML テキストエリアへの行番号の追加: ガイド を扱う場合HTML の要素では、テキストの横に行番号を表示することは、読みやすさと編集の正確さを保つために重要な機能です。このタスクに対する包括的なソリューションを検討してみましょう。</p> <p><strong>CodeMirror</strong></p> <p>テキストエリアに行番号を追加するための最も推奨されるツールは CodeMirror です。これは、テキスト編集のための幅広い機能を提供する人気のあるオープンソース JavaScript ライブラリです。 CodeMirror を使用するには、ライブラリをインクルードし、適切なオプションを使用してインスタンス化するだけです。</p> <p><strong>ライブ デモ</strong></p> <p>これは、行番号付けに CodeMirror を使用する方法を示す実際のデモです。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', theme: 'abbott', });</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><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></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>追加ヒント</strong></p> <p>行番号が実際の行と一致しないという問題に直面している場合は、モニターの 1 インチあたりのドット数 (DPI) が 100% より高く設定されている可能性があります。 CodeMirror はこれを考慮しますが、他のソリューションは考慮しない場合があります。</p> <p><strong>結論</strong></p> <p>CodeMirror は、HTML のテキストエリアに行番号を追加するための信頼できる強力なソリューションです。幅広いカスタマイズ オプションが提供され、HTML 要素とシームレスに統合されます。</p>
