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 HTMLtextareaelement into an auto highlighting TextareaDecorator.parseris used to determine how to subdivide and style the content.parsercan be any object which defines thetokenizeandidentifymethods as described in the Parser API below..inputThe input layer of the LDT, atextareaelement..outputThe output layer of the LDT, apreelement..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.rulesis an object whose keys are CSS classes and values are the regular expressions which match each token.iis 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 )Splitsstringinto 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 )Insertsstringinto theelementbefore the current cursor position.
Opened to contributions, it would be nice to have some predefined parsers and intergrations for react, vue, etc