Let’s Learn Blazor: CodeMirror 6 for Blazor

Add Code Editing to your Blazor App With Ease

This is one of several articles on Blazor I’ll be writing, all so engineers can get familiar with the capabilities and tricks of this burgeoning and exciting web technology

The Need

As I’ve likely mentioned too many times to count before, I’ve been building this writing app for a couple years now. I’m using a combination of Blazor Server and Electron.net. I’ve got most of the basics in place in terms of editing, epub publishing, file management and so on. That’s when I realised an amazing feature for my app would be the ability for a writer to be able to edit and maintain their own epub CSS stylesheets. While not everyone will want to get down to that level of technical details, it’s super convenient to be able to edit some css and see those changes reflected in a preview of the various pages.

I don’t think it’s lost on any dev that dumping some css text (or any code for that matter) into an editable field is easy as could be but making it useful from a code-editing perspective is a whole other kettle of complex fish. There’s so much required, such as proper tabbing, colour formatting, auto-complete, just to name a few. Code editing and display is no easy task, and I was not keen to spend the next year and a half…