HTML 텍스트 영역에 줄 번호를 추가하는 방법은 무엇입니까?

HTML 텍스트 영역의 줄 번호 향상

질문: 왼쪽 여백에 줄 번호를 표시하는 방법은 무엇입니까? <텍스트 영역> 요소?

답변:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!