3 ms·
Consider: `5 + 3 = ${5 + 3}`; const foo = async () => {} const foo = async function () {} const foo = { 'PI': 3.14 } // etc. And then also remember
by _gabe_ 3y ago
Consider:
`5 + 3 = ${5 + 3}`;
const foo = async () => {}
const foo = async function () {}
const foo = { 'PI': 3.14 }
// etc.
And then also remember that HTML can embed that, and CSS. And then highlighting something like TSX which can highlight HTML etc. It quickly becomes a recursive nightmare.
And all this is coming from someone who thought similarly to you. And now about 3 weeks of full time work (plus using a pre-built library oniguruma to do a lot of heavy lifting) and I just barely have a performant syntax highlighter. There are still a lot of edge cases I'm working through though.
- hyperhello 3y agoIt's not a nightmare, just a very small bit of mechanical work. I realize HN hates it when people don't talk about JavaScript like it's sex and quantum mechanics so I'll just back off and stop.
- _gabe_ 3y agoI'm only talking about JavaScript because it was the most difficult language to correctly parse so far. The examples I chose highlight that it's not as simple as a couple regexes. Notice how curly brackets can indicate: additional JS code, objects, or interpolated strings. The objects require different syntax highlighting than the JS code. This means you need some complex regexes to provide additional insight into what your highlighting. And as someone actively working on this, yes. It is a nightmare. No, it's not trivial.