Code highlighting: don't highlighting leading/trailing empty space

[damithc]

Current:

Problem: The block-wide highlighted box interferes with the visual structure of the code (as driven by indentations).

I wonder if we can/should omit the highlighting from the leading/trailing empty area, like so:

[ang-zeyu]

likely possible, but I think it may look awkward if you highlight multiple consecutive lines. 🤔
e.g. if you highlight system.out.println above as well you'd have a "ladder" background highlight pattern

[damithc]

e.g. if you highlight system.out.println above as well you'd have a "ladder" background highlight pattern

Probably should be OK. That's how we usually highlight text. Ideally, we should make it configurable. Possibly related to our other ambition to allow highlighting only certain words e.g., highlight-lines="2[5:10]" to highlight characters 5-10 in line 2, 2[:] to highlight all text, and 2 to highlight the full-width.

[ryoarmanda]

Hi, I'm currently working this issue and unfortunately I'm stuck on how to be able to highlight part of the line (the "2[5:10]" case). The problem is, at the time when the highlighting is about to be added, the code in question is already marked up by highlight.js. It's not the "raw" text anymore.

Consider this code fence, which will highlight the second line:

```js {highlight-lines="2"}
function f(x) {
  return x * x;
}
```

During highlight processing, the line in question already looks like this just before the highlight is added (I added a log for the line variable at core/src/lib/markdown-it/index.js, line 127):

The existing approach (highlighting the whole line) simply just wraps a highlight <span> around the marked up line, but as we're trying to highlight just a part of it, it becomes hard to determine where to definitively put the highlight <span>. Say I want to highlight just a part of line 2, then depending on the start and end of the highlight, the <span> can be outside the <span class="hljs-keyword">, within it, or going over it. And there might be a possibility for nested hljs spans, which then creates another complication in order to not interrupt any existing tags.

With this in mind, I'm not sure whether I can do highlighting a specific part of the line like the "2[5:10]" case. But, I'm currently thinking of other ideas as well to make it possible. Do you have any advice regarding this?

Meanwhile, I'll try implementing the "2[:]" case. I think it's more straightforward than the specific range one.

[ang-zeyu]

a sure solution would be to reparse the hljs output and then manipulate it. But its likely going to be far too complex and heavy to be worth it for a minor use case. (or better yet just do it in componentParser)

I came across this highlightjs/highlight.js#2064 in a quick search, maybe you could investigate if its possible to get highlightBlock to work with the pseudo dom output from htmlparser.

But just implementing the original part of this issue is sufficient to me as well : )