CodeMirror를 사용하여 HTML 텍스트 영역에 줄 번호를 어떻게 추가합니까?

HTML 텍스트 영역에 줄 번호를 추가하는 방법

이 StackOverflow 토론에서 사용자는 HTML 텍스트 영역에 줄 번호를 추가하는 솔루션을 찾았습니다. 텍스트 영역 요소의 왼쪽 여백. 사용자는 다음 코드 조각을 제공했습니다.

<textarea name="program"></textarea>

권장되는 CodeMirror 라이브러리는 효과적인 솔루션을 제공하지만 기술적 세부 사항에 대한 의문이 제기됩니다.

CodeMirror: 강력한 텍스트 편집기

CodeMirror는 다음과 완벽하게 통합되는 다용도 텍스트 편집기입니다. 웹 애플리케이션. 텍스트 영역에 통합하려면 다음 단계를 따르세요.

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

이 코드 조각은 ID가 "code"인 요소 내에서 CodeMirror 인스턴스를 초기화합니다. "lineNumbers" 옵션을 사용하면 줄 번호 표시가 활성화되고 "mode" 및 "theme" 옵션은 각각 코드 강조 표시 및 테마를 사용자 정의합니다.

데모 및 문서

작동 시연은 다음을 참고하세요. 스니펫:

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

<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css">

<textarea></textarea>

자세한 내용과 고급 사용자 정의 옵션을 보려면 https://codemirror.net/doc/에서 종합 문서를 살펴보세요.

위 내용은 CodeMirror를 사용하여 HTML 텍스트 영역에 줄 번호를 어떻게 추가합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!