There are a few instances where you have to edit code in the browser:
- Editing the source of a page
- Editing the source of a region
- Editing templates
- Editing blocks (formerly snippets)
Surreal has always had a decent code editor with syntax highlighting, but I thought the overall experience could be improved. Meet the new Code Editor, which you’ll find in various places in 7.0.
I created this component using CodeMirror. Key features include:
- A beautifully designed theme inspired by Atom’s One Dark theme
- Bracket matching (highlights matching brackets and parenthesis)
- Tag matching (highlights matching HTML tags)
- Editable classes (highlights
- Drag and drop (to insert your HTML file into the editor)\
- Multiple cursors (because it’s so handy)
The editor supports a fixed height mode and an auto-height mode (i.e. expands as you add more lines). I like the appearance of a fixed height control better, but it doesn’t usually provide enough room for editing so I’m using auto-height for now.
I’m thinking of adding a full screen option as an alternative, so the control will be a fixed height but you can make it full screen for more serious editing. I’ll post an update later on about this!