Topic on Extension talk:SyntaxHighlight/Flow

Hi there!

This talk page is insanely long, so bear with me if my question has already been answered (a quick search revealed nothing).

I'm editing a MediaWiki installation where I have no access whatsoever to its configuration, not to mention its actual files. Thus, I'm looking for a user-centred solution to this apparently simple issue: how to use different colour highlights?

Let me try to explain better. With the highlight parameter, we have the option of selecting whatever lines (even blocks of lines) we wish — but the highlighting colour is always the same (default seems to be 'marker yellow').

However, in the wiki I'm editing, one of the users requires explaining how different areas of the code work together, using different colours to highlight different sections. This is actually something I have seen in several examples elsewhere (not on wikis, mind you!) and is not uncommon in certain academic environments, to attract the student's attention to how some parts of the code connect to others.

I wonder, therefore, if such a functionality is possible using the current implementation of the SyntaxHighlight extension, or if it's the kind of thing that would require either a rewriting of the code (e.g., by adding extra parameters/attributes to the <syntaxhighlight> tag), the CSS file associated with a particular page, etc. Or if this is something already built-in (Pygments, at least, doesn't mention it, so it would be something developed on top of it, at the extension level itself), how could it be triggered?

A few alternatives, of course, come to mind, namely, stopping the flow of execution inside a <syntaxhighlight> block (possibly using one of those {{#tag}} blocks which seem to be so popular to 'fix' certain aspects of the rendering procedure) so that, say, the next line gets a different background colour from the standard yellowish one. I can conceive of a few ideas on how that could be implemented, but I'm not really sure how to apply them (I need to learn a bit more about #tag, too, and see if I have access to it on the wiki I'm working). So, hopefully, someone reads this and answers with a one-liner trick to get it working :)

Thank you all in advance for whatever insights you might share!

It is possible to use Extension:TemplateStyles to inject CSS into a page that alters colors for content marked up by SyntaxHighlight. Template:Codesample is one example of this. hll is the CSS class applied to highlighted lines.

There is not currently any mechanism to add additional CSS classes or ids to individual lines/ranges of lines highlighted via the highlight=... attribute. This would be necessary to allow you then target each line/range of lines with a different color via CSS.

It may be possible to approximate your desired solution by placing each highlighted line/range of lines in a separate <syntaxhighlight> tag on your page.

Another very hacky solution might be using styles like .hll:has(> .linenos[data-line="7"]) { background-color: purple} assuming you are also showing line numbers in the code blocks via the line attribute. TemplateStyles does not currently support the :has() pseudo-class, so this approach would need to use site wide CSS which makes it of very limited use.