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

DDD
풀어 주다: 2024-11-12 07:12:01
원래의
671명이 탐색했습니다.

How do I add line numbers to an HTML textarea using CodeMirror?

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

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

<TEXTAREA name="program">
로그인 후 복사

권장되는 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>
로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿