yarn add light-code-editor
# or
npm install light-code-editor
How to use codesandbox
- include styles "light-code-editor/styles.css"
- create parser
const genericParser = new Parser({
whitespace: /\s+/,
comment: /\/\*([^\*]|\*[^\/])*(\*\/?)?|(\/\/|#)[^\r\n]*/,
string: /"(\\.|[^"\r\n])*"?|'(\\.|[^'\r\n])*'?/,
number: /0x[\dA-Fa-f]+|-?(\d+\.?\d*|\.\d+)/,
keyword: /(and|as|case|catch|class|const|def|delete|die|do|else|elseif|esac|exit|extends|false|fi|finally|for|foreach|function|global|if|new|null|or|private|protected|public|published|resource|return|self|static|struct|switch|then|this|throw|true|try|var|void|while|xor)(?!\w|=)/,
variable: /[\$\%\@](\->|\w)+(?!\w)|\${\w*}?/,
define: /[$A-Z_a-z0-9]+/,
op: /[\+\-\*\/=<>!]=?|[\(\)\{\}\[\]\.\|]/,
other: /\S+/
});
- style your items
.ltd .comment {
color: red;
}
.ltd .keyword {
color: black;
}
var textarea = $("codeArea");
textarea.value = "<!DOCTYPE html>\n<html>\n\t" + "\n</html>";
decorator = new TextareaDecorator(textarea, parser);
var textarea = $("codeArea");
textarea.value = "<!DOCTYPE html>\n<html>\n\t" + "\n</html>";
decorator = new TextareaDecorator(textarea, parser);
bindKey(textarea, {
"Ctrl-1": e => {
insertAtCursor("your superb text", el);
decorator.update();
},
"Shift-Ctrl-2": e => {
alert("hello");
}
});
see detailed examples in stories
<!-- normal textarea fall-back, add an id to access it from javascript --> <textarea id='codeArea' class='ldt'></textarea> <noscript>Please enable JavaScript to allow syntax highlighting.</noscript>
// create a parser with a mapping of css classes to regular expressions // everything must be matched, so 'whitespace' and 'other' are commonly included var parser = new Parser( { whitespace: /\s+/, comment: /\/\/[^\r\n]*/, other: /\S+/ } ); // get the textarea with $ (document.getElementById) // pass the textarea element and parser to LDT var ldt = new TextareaDecorator( $('codeArea'), parser );
/* editor styles */ .ldt { width: 400px; height: 300px; border: 1px solid black; } /* styles applied to comment tokens */ .ldt .comment { color: silver; }
new TextareaDecorator( textarea, parser )
Converts a HTMLtextarea
element into an auto highlighting TextareaDecorator.parser
is used to determine how to subdivide and style the content.parser
can be any object which defines thetokenize
andidentify
methods as described in the Parser API below..input
The input layer of the LDT, atextarea
element..output
The output layer of the LDT, apre
element..update()
Updates the highlighting of the LDT. It is automatically called on user input. You shouldn't need to call this unless you programmatically changed the contents of thetextarea
.
new Parser( [rules], [i] )
Creates a parser.rules
is an object whose keys are CSS classes and values are the regular expressions which match each token.i
is a boolean which determines if the matching is case insensitive, it defaults tofalse
..add( rules )
Adds a mapping of CSS class names to regular expressions..tokenize( string )
Splitsstring
into an array of tokens as defined by.rules
..identify( string )
Finds the CSS class name associated with the tokenstring
.
This is a singleton, you do not need to instantiate this object.
.bindKey( element, [keymap] )
Adds Keybinder methods toelement
, optionally setting the element'skeymap
.
This is a singleton, you do not need to instantiate this object.
.add( element )
Adds SelectHelper methods toelement
.element.insertAtCursor( string )
Insertsstring
into theelement
before the current cursor position.
Opened to contributions, it would be nice to have some predefined parsers and intergrations for react, vue, etc