How to Create a syntax highlighted input box in JavaScript

The textarea element has been widely used in Web IDE. Generally, the textarea editor provided by the website cannot meet our needs. As a developer, we often need to edit code online and highlight code. Therefore, through other open-source projects, we can add some practical functions. In this article, I will use the JavaScript library ACE to create an input box effect. This is a fully open-source script. This script allows developers to create input boxes that support syntax highlighting. Then you can embed code anywhere on the website.
First, we need to download the ACE code from Github. Decompress the package and introduce the js file in your header. Copy codeThe Code is as follows: <script src = "src-min/ace. js" type = "text/javascript" charset = "UTF-8"> </script>

Add code to editor
Set a div with the id of editor and call the ace. edit () method in the script. The Code is as follows:Copy codeThe Code is as follows: var editor = ace. edit ("editor ");
Editor. getSession (). setMode ("ace/mode/javascript"); you can rename a variable. For convenience, I have defined var editor as a variable. You can also define var demoeditor as a variable. The second line declares the type of language used for highlighting. You can select a set of other languages from the src directory. Here is a set of Supported languages:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
Use additional parametersCopy codeThe Code is as follows: editor. setTheme ("ace/theme/dawn ");
Editor. getSession (). setTabSize (2 );
Editor. getSession (). setUseWrapMode (true );

The three lines of code are about the text input effect. The first line changes the default syntax color and topic of the Code. There are dozens of new topics under the src directory, you can choose
The other two options are about user experience. Generally, press the Tab key on the keyboard to enter four spaces. Here I set two spaces. In addition, the text will not automatically wrap by default, when it is exceeded, a horizontal scroll bar is appended to extend outward. However, using setUseWrapMode (true) in this way, we can fix the problem of automatic line feed.
There are also some other commands. You can refer to the ACE wizard. This includes changing the cursor position, dynamically adding new content, or copying all the content of the text.
CSS codeCopy codeThe Code is as follows: # editor {
Margin-left: 15px;
Margin-top: 15px;
Width: 1000px;
Height: 400px;
}