Introducing makeup_lexers with a proposal to merge them into the official org

[SteffenDE]

Hello everyone,

I've recently been on a quest to improve syntax highlighting on the phoenixframework.org website (as well as the LiveView docs). Since my recent contributions for HEEx sigil highlighting I've been working on addressing the remaining pieces I deemed missing:

1. Highlighting JavaScript snippets
2. Highlighting XML (although that's only one article in the Phoenix blog using it)
3. Highlighting CSS

That's how makeup_lexers came into existence. It's basically my personal collection of Makeup Lexers, currently supporting:

• JavaScript
• XML
• HTML
• CSS

HTML even supports highlighting of included <script> and <style> tags using the other Lexers.

I did this without much previous knowledge of NimbleParsec and Makeup, and I'm openly admitting that I let Claude 3.5 Sonnet write the basic structure of the Lexers, adjusting and refining it myself until I was happy with the results. I feel confident enough to say that is definitely is not garbage, but there still might be lots of things one might do differently with more knowledge.

For anyone interested, the prompt basically looked like this:

Please use the following pygments definitions and create a new lexer for Makeup similar to the one included for Elixir. It must use NimbleParsec combinators and optional postprocessing clauses to lex a JavaScript code string.

I included a copy of the official Elixir lexer, as well as the pygments code for JavaScript.

I'm creating this issue in the makeup_html repo, because that is the only lexer in the elixir-makeup GitHub org for a language already supported and there's no good way that I know of to discuss things on here outside of a repo.

I'd like to propose to add a makeup_javascript repo containing the new JavaScript lexer where I'd be happy to contribute my code under any license you seem fit. Furthermore, I'd like to get some feedback on the XML/HTML lexer to see if it could replace the existing one (it addresses all of the points in #3).

I know that there is already https://github.com/begedin/makeup_css for CSS. I did not look at its code initially, as I wanted to see if my "let's get a basic lexer from an LLM" approach would work for CSS too. In any case I'd like to see a makeup_css in the official org, either through adopting the existing makeup_css or working based on what's in makeup_lexers. This would need some collaboration with @begedin anyway, as the makeup_css hex repo is already taken.

While writing the previous paragraph I also found out that @begedin already has makeup_ts and I completely forgot about @mohammedzeglam-pg's makeup_javascript. My JavaScript lexer from makeup_lexers doesn't handle TypeScript, but it does handle a bunch of things that both of the existing ones don't properly handle for JavaScript. Some examples being: import and export statements, proper string template interpolation, getter and setter functions, arrow functions. I'm @ mentioning them here to maybe get their feedback and start a discussion about moving the hex ownership of makeup_javascript and/or makeup_css to the makeup team.

Happy highlighting!
Steffen