Phi editor

• Created using Lezer Grammar and Codemirror 6
• EO repo

Try online

• Here

Features

• Syntax highlighting
• Show parsing errors (thanks to this post)
• Show Lezer parse tree in browser console (thanks to this post)
• Underline code (beta) with Ctrl+H(see this example)
• Actions from basic-setup, including keybindings
• Continued indentation (thanks to this facet example)
• Share code by permalink
• Wait until <div> for the editor is created

Use with your HTML

1. Create a tag with id="phi-editor". The editor tab will be attached to it. You can change tag id in ./src/main.ts where view is declared.
2. Add the script and styles from ./docs, e.g.:

<script type="module" src="./phi-editor.js"></script>
<link rel="stylesheet" href="./phi-editor.css">

Development

• Install the dependencies and run in rebuild-on-change mode

npm i && npm run dev