Prism syntax highlighting should support specific lines

[peterbe]

In http://localhost:3000/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations you'll find,

<pre class="brush: js; highlight:[5,10,15,18]">function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
...

This is what it should look like: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

[peterbe]

Also, whatever Prism does when you using the "lazy way" in the browser, can we get to that in Node instead of having to manually mess around with cheerio and finding things? Perhaps we can't get away from using cheerio but whatever code runs in the browser, in Prism, is able to copy with the DOM node's classList. So can we use the same in Node?

[peterbe]

Another problem is HTML like this:

<pre class="brush: css no-line-numbers">

which is different from:

<pre class="brush: css">

It looks like this is not possible in Prism, from Node!

[peterbe]

Getting Prism to work on the server is clearly hard and outright painful. There's evidence that the Prism library is not working very well in Node. Basics work, as clearly demonstrated in the current Yari prototype, but anything beyond that is all about doing in the web.

With all that's going on, I think we should abandon hope to do syntax highlighting in the server (build) and move it back to the client. Like Kuma does. It has the advantage that we don't need to solve the problem about line-numbers or non-trivial lexers in Node yet.

And in terms of performance, as demonstrated here being able to SSR the syntax highlighting isn't a huge sell on your Lighthouse score.

[peterbe]

Note-to-self; The way we do Prism with Node means we're failing on a bunch of languages. First of all, it might be interesting to see what we can learn from https://github.com/benjycui/node-prismjs and how it does things.

Second, made a complete build (of folder search web) and tallied all the times Prism.languages[name]; came back falsy. Here's the breakdown:

glsl     7
bash     147
python   30
json     297
sql      3
none     20
sh       2
cpp      21
php      12
JS       1
java     14
plain    6
shell    4
http     6
unix     1
rust     5
toml     1
wasm     29

[peterbe]

I don't even like line numbers. It might make sense if there's text underneath that needs to say something like
"On line 23 we pull in the special library so that we don't get a crash later on line 41"

But here, for example, it's of no use:

To a reader, that just adds noise.

[peterbe]

This is supposedly how you're supposed to do it but it's not working.
PrismJS/prism#1171 (comment) when I try it. They do mention there that it's a private API so there's no guaranteed that it'll work.

I'm tempted to boldly decide that line-number is a think that's just going to have to wait.
#1071 is a huge progress in that it's much faster than forcing the client to do it in runtime and as of that PR we'll have support for all languages (aka. grammars) without any complex plugin loading.

Also, there's bigger fish to fry. Every <pre><code> block should be considered a flaw and it should be fixable: #1072