getzola / zola

A fast static site generator in a single binary with everything built-in. https://www.getzola.org
https://www.getzola.org
MIT License
13.76k stars 957 forks source link

Syntax highlighting: Highlight spans/lines #127

Closed phil-opp closed 4 years ago

phil-opp commented 7 years ago

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!

Keats commented 7 years ago

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?

trishume commented 7 years ago

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.

codesections commented 6 years ago

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

Keats commented 6 years ago

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

Keats commented 5 years ago

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

hmble commented 4 years ago

@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

Keats commented 4 years ago

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

Keats commented 4 years ago

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

It will be in 0.13

Keats commented 4 years ago

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