A text editor and syntax highlighter written in JavaScript. The lexer utilizes regular expressions to match tokens within the given text. The tokens are then inserted into the DOM with a class that corresponds to its type. Each token is styled based on its class via CSS. All input is saved to localStorage so users can continue from previous sessions. Furthermore, the CSS uses flexbox and media queries to provide a fluid, responsive design.
To use this tool, click inside the text area on the left and begin typing. You will see your input being syntactically highlighted to the right. You can also hover over an element on the right to show a description of its token in the footer. This project was originally completed as the final project in the CSCI E-3 Intro to Web Programming Using Javascript course from the Harvard Extension School.