JavaScript implementation of input box editor syntax highlighting ideas and code details

The textarea element has been widely used in web IDEs. Usually the textarea editor that comes with the website cannot meet our needs. As a developer, we often need to edit code online, highlight code, etc. Therefore, through other open source projects, we can add some practical functions. In this article, the JavaScript library ACE will be used to create an input box effect. This is a completely open source script. This script allows developers to create input boxes that support syntax highlighting. Then you can embed the code anywhere in the website

Download library First we need to download the ACE code from Github. After downloading, unzip it and introduce the js file in your header section

Add code to the editor

First set a p with the id of editor and then call ace.edit() in the script Method, the code is as follows

var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript");

You can rename the variable. For convenience, I defined var editor as a variable. You can also define var demoeditor as a variable. The second line declares which type of language highlighting to use. You can select additional language collections from the src directory. Here is a collection of supported languages:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
Use additional parameters

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

These three lines of code are about text input effects. The first line changes the default syntax color and theme of the code. There are dozens of new themes in the src directory. You can choose any of them
The other two options are about user experience. Normally, pressing the Tab key on the keyboard will enter 4 spaces. Here I set it to 2 spaces. In addition, the text will not wrap automatically by default. If it exceeds the limit, a horizontal scroll bar will be appended and extended outwards. . But using this method setUseWrapMode(true), we can fix the word wrapping problem.
There are some other commands, you can refer to the ACE wizard. This includes changing the cursor position, dynamically adding new content, or copying text.

CSS code

#editor { 
margin-left: 15px; 
margin-top: 15px; 
width: 1000px; 
height: 400px; 
}

The above is the detailed content of JavaScript implementation of input box editor syntax highlighting ideas and code details. For more information, please follow other related articles on the PHP Chinese website!