Highlighting parts of code

[LeaVerou]

Often in tutorials one wants to only highlight the part of code that changed from the previous snippet.
We could introduce a microsyntax for that (like **text**) and wrap it in <mark> elements that the author could then style (we could include some rudimentary styling).

This will be a fun plugin to write, and I’d love to write it myself at some point. Thoughts?

[Golmote]

Shouldn't it be part of the line-highlight plugin? I mean, a plugin that enables to highlight any part of the code, may it be lines or fragments of line?

[LeaVerou]

Hmmm, yes, you’re right. I was thinking that the implementation would be completely different, but that’s a bad way to think. Users don’t care about implementation, they care about function.

Speaking of that, it should also be possible to highlight lines without knowing their number, just by marking them up somehow.

[Golmote]

But we need to find a way to mark them that will not conflict with any language.

The example you gave before (**) is already in conflict with the Markdown syntax, and probably with the "power" operation in some languages, like python (2 ** 3 ** 4).

[LeaVerou]

Yeah, that was just an example.

[Golmote]

My point was that it may be hard to find a single pattern that would play nice with all languages. Unless the marking is based on some configuration specific to the block of code.

[LeaVerou]

Hmmm, perhaps it could be user-defined…

[lgiraudel]

I don't know if this issue is still relevant or not, but what about passing the code to highlight as an attribute of the code tag ?

Something like this:

<pre><code class="language-css" data-highlight="L2">
p {
  color: red
}
</code></pre>

And we can think about more complex syntax in this attribute, like lines range, column position, column range, multiple ranges, etc.