JavaScript implementation ideas for creating a syntax highlighting input box

JavaScript implementation ideas for creating a syntax highlighting input box_javascript skills

WBOY

Release： 2016-05-16 17:41:31

Original

1490 people have browsed it

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 the code online, highlight the code, etc. 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 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 the library First we need to download the ACE code from Github. After downloading, unzip it and introduce the js file in your header section

Copy the code The code is as follows:

Add code to editor The tool
first sets a div with the ID of editor and then calls the ace.edit() method in the script. The code is as follows

Copy code The code is as follows:

 
var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript"); You can rename Variables, 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

Copy the code The code is as follows:

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

These 3 lines of code are about text input Effectively, the first line changes the default syntax color and theme of the code. There are dozens of new themes in the src directory, and you can choose from 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

Copy code The code is as follows:

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

JavaScript implementation ideas for creating a syntax highlighting input box_javascript skills