I made a code editor using HTML, CSS and JS!

Feb 13, 2024 edited May 23, 2025

I made a code editor! It's called Morsel, and here is a sample.

It's very nice, isn't it? The features are:

Syntax highlighting

..I couldn't think of anything else. You can access the core syntax highlighting features by making an element with one of the morsel-language classes.

There are currently four supported languages. They are:

HTML: To make your website
CSS: To style your website
JavaScript or JS: To make your website functional
SGML and XML: Languages that are both human and machine readable (more commonly XML).

To use it, put the following in your <head>:

<script src="https://tiashdev.github.io/tiashfam-resources/morsel/index.js"></script>

The features left to add are:

~~Making the tab key work as indentation~~ Some people navigate their computers by only using the tab key, not using their mouse (if they have a mouse). For those people, I am not implementing this feature.
Note: I did end up implementing this feature, but put it behind a flag.
~~Making it less of a pain to set up~~ I think I have finally made it easy to set up! To see the code to set it up, click the sample link above.

Note: If you clicked the sample link above, you might have noticed that the SFY (See For Yourself) editor has syntax highlighting. And that was done using Morsel!