입력 box_javascript 기술을 강조하는 구문 생성을 위한 JavaScript 구현 아이디어

textarea 요소는 웹 IDE에서 널리 사용되었습니다. 일반적으로 웹 사이트와 함께 제공되는 텍스트 영역 편집기는 우리의 요구를 충족할 수 없습니다. 개발자로서 우리는 종종 온라인으로 코드를 편집하고 코드를 강조 표시해야 하는 경우가 있습니다. 따라서 우리는 다른 오픈 소스 프로젝트를 통해 여기에 몇 가지 실용적인 기능을 추가할 수 있습니다. 기사에서는 JavaScript 라이브러리 ACE를 사용하여 입력 상자 효과를 만들어 보겠습니다. 이것은 완전히 오픈 소스 스크립트입니다. 이 스크립트를 사용하면 개발자는 구문 강조를 지원하는 입력 상자를 만들 수 있습니다. 그런 다음 웹사이트 어디든 코드를 삽입할 수 있습니다.
라이브러리 다운로드 먼저 Github에서 ACE 코드를 다운로드해야 합니다. 다운로드 후 압축을 풀고 헤더 섹션에 js 파일을 삽입하세요.

코드 복사 코드는 다음과 같습니다.

편집기에 코드 추가
도구는 먼저 편집기의 ID로 div를 설정한 후 스크립트에서 ace.edit() 메서드를 호출합니다.

코드 복사 코드는 다음과 같습니다.

var editor = ace.edit("editor")
editor.getSession().setMode ("ace/mode/javascript"); 편의상 변수 이름을 바꿀 수 있습니다. 저는 var editor를 변수로 정의했습니다. var decoeditor를 변수로 정의할 수도 있습니다. 두 번째 줄은 사용할 언어 강조 유형을 선언합니다. src 디렉터리에서 추가 언어 컬렉션을 선택할 수 있습니다. 지원되는 언어 모음은 다음과 같습니다.

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
사용 추가 매개변수

코드 복사 코드는 다음과 같습니다.

editor.setTheme("ace /theme /dawn");
editor.getSession().setTabSize(2);
editor.getSession().setUseWrapMode(true);

이 세 줄의 코드는 다음과 같습니다. 텍스트 입력에 대해 효과적으로 첫 번째 줄은 코드의 기본 구문 색상과 테마를 변경합니다. src 디렉터리에는 수십 개의 새로운 테마가 있으며 그중에서 선택할 수 있습니다
다른 두 가지 옵션은 사용자 경험에 관한 것입니다. 일반적으로 키보드의 Tab 키를 누르면 4개의 공백이 입력되는데 여기서는 2개의 공백으로 설정했습니다. 또한 기본적으로 텍스트가 자동으로 줄 바꿈되지 않고 제한을 초과하면 가로 스크롤 막대가 추가되어 바깥쪽으로 확장됩니다. . 하지만 이 setUseWrapMode(true) 메소드를 사용하면 단어 줄 바꿈 문제를 해결할 수 있습니다.
다른 명령도 있습니다. ACE 마법사를 참조하세요. 여기에는 커서 위치 변경, 새 콘텐츠 동적으로 추가 또는 텍스트 복사가 포함됩니다.
CSS 코드

코드 복사 코드는 다음과 같습니다.

#editor {
여백-왼쪽: 15px;
여백: 15px;
너비: 1000px;
높이: 400px;