Hacker News Reader

Comment by nfrmatk | Hacker News Reader

I generally agree that the web could be simpler. A lot can be accomplished with just plain ol' HTML/CSS nowadays. I think there's a kernel of truth in what you're saying about apps vs. websites.

That said, how would you propose to do syntax highlighting instead of

> just a wall of <div>s and <span>s, for every single visible character

? Rather than being a wall, it looks to me like it's actually a tree of <divs> and <span>s for every line and every _token_.

I think the author has used Prism[1], so I assume the highlighting was done client-side, but even if you were to do the task server-side I think you'd end up with similar HTML/CSS, no?

What would be a better approach to solving the same problem?

[1]: https://prismjs.com/

View on HN

From the WhatCMS, author uses Gatsby, assume no trace of Prismjs is used.

Gatsby doesn't offer a syntax highlighter out of the box. It has markdown (and MDX) components that generate pages, and those in turn can have syntax highlighting plugins. AFAICT prismjs indeed is the predominant one used by Gatsby sites (at least, in mine). But thanks to SSR prismjs will typically run at compile time.

Hey, OP/author here, I do use prismJS under the hood, a flavor of it: prism-react-renderer, so it might indeed remove the traces of Prism.

Agree that it's a mess of div and spans, but it does the job.

> how would you propose to do syntax highlighting

Of course you'd use spans to do syntax highlighting, just like you'd use JavaScript to do interactivity. You know what the commenter means–using these in places where they aren't necessary at all.

The commenter specifically used that tree of spans as an example of the horrible mess that is modern HTML. So it is necessary here to deliver the feature, and I think the broader point is that we might see a mess in the DOM inspector, but it is a requirement to deliver certain modern features in a productive way.

Like normal text on a page? No. For one very specific thing that it's useful for? Of course. If it wasn't useful for something it wouldn't exist, the issue is using it for things that it has no reason to be used for.

The code snippet seems like the only part where individual words are wrapped in their own divs or spans. It's not true that the whole article is like that. It seems like the article has reasonably semantic html elements present, just with minified CSS classnames and maybe a couple extra wrapping divs at the top.

I'm not the one who called out this site, and this one "OK" with its semantic HTML for the article content (though outside of that it has a bit more soup than it probably needs). It does render a bunch of stuff with JavaScript though so that's not great :(

Reply on news.ycombinator.com