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>줄 번호가 실제 줄과 일치하지 않는 문제가 발생하는 경우 모니터의 DPI(인치당 도트 수)가 100%보다 높게 설정되어 있을 수 있습니다. CodeMirror는 이를 고려하지만 다른 솔루션에서는 그렇지 않을 수도 있습니다.</p> <p><strong>결론</strong></p> <p>CodeMirror는 HTML의 텍스트 영역에 줄 번호를 추가하는 안정적이고 강력한 솔루션입니다. 다양한 사용자 정의 옵션을 제공하고 HTML 요소와 완벽하게 통합됩니다.</p>
