Zola: Syntax highlighting: Highlight spans/lines

Created on 8 Oct 2017  路  9Comments  路  Source: getzola/zola

The remark.js markdown presentation framework has two very useful features for syntax highlighting: highlightLines and highlightSpans. The idea is to emphasize specific lines/spans in a code block:

image

Both features are optional (opt-in) to avoid unexpected results. For highlighting a line, it needs to be prefixed with an asterix (*). For highlighting a span, it needs to be enclosed in backticks (``). It is implemented using a regex search+replace after formatting.

This feature would be very useful for os.phil-opp.com, so it would be awesome if gutenberg supported something like this!

enhancement help wanted

All 9 comments

That's something I definitely want to have! (that and displaying the line numbers). I don't think the Regex approach would work with Syntect as it doesn't use classes and we will need to know the highlight bg/fg colour of the theme.
From a very quick look, I believe we can get those colours with something like https://docs.rs/syntect/1.7.3/syntect/highlighting/struct.Highlighter.html#method.get_style and looking up the settings.selection or settings.lineHighlight but I don't believe there is a way to do that automatically in syntect so this will have to be a search&replace.

@trishume have you done the selection highlight in Xi or have ideas on how to do that?

Xi does selection in a special way, but they have a way to solve this kind of thing, but it's a fairly complex but powerful mechanism so I'm not sure it should be applied here.

Here's how I would do it. For each line you:

  1. Go through the input line, remove each delimiter and record its index in the text after delimiters are removed.
  2. Parse the line with syntect and highlight it, this gives you a Vec<(Style, &str)>.
  3. Walk over the delimiter indices and style chunks in tandem, and if some text is in the delimited region, use Style#apply to apply a StyleModifier for the highlight (probably based off the theme settings). This may require splitting chunks if the delimiter doesn't fall on a token boundary.
  4. Apply styles_to_coloured_html to the result (I just realized I let my Canadian-ness slip through in that spelling even though I used the US spelling most other places).

Step 3 unfortunately requires a non-trivial function that will require some thinking and probably careful use of match, but it shouldn't be too hard.

This would also be very helpful for my use-cases.

https://github.com/trishume/syntect/pull/198 should make it possible but a new version of syntect is not released yet.
If anyone wants to have a go at it you can depend on syntect master for the time being

Closing in favour of the discourse post https://zola.discourse.group/t/highlighting-improvements/19

@Keats Is there any update on this issue ?bat added line highlight in PR 453. It uses same syntect library.

above linked discourse post suggests about syntax like

```rust, linenos, hl_lines=3-8 10-20
I like this syntax and it seems easy yet similar to other syntax highlighters

No updates yet.
That's a feature I would really like though so re-opening an issue and hoping someone can do a PR.

PR for highlighting: https://github.com/getzola/zola/pull/1131

It will be in 0.13

This is done but can be improved still. Closing this issue for now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

phil-opp picture phil-opp  路  6Comments

porglezomp picture porglezomp  路  7Comments

sternj picture sternj  路  6Comments

svenstaro picture svenstaro  路  5Comments

nikhiljha picture nikhiljha  路  5Comments