New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting: Highlight spans/lines #127

Closed
phil-opp opened this Issue Oct 8, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@phil-opp
Copy link
Contributor

phil-opp commented Oct 8, 2017

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

This comment has been minimized.

Copy link
Collaborator

Keats commented Oct 11, 2017

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

This comment has been minimized.

Copy link

trishume commented Oct 12, 2017

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

This comment has been minimized.

Copy link
Contributor

codesections commented Jul 13, 2018

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

@Keats

This comment has been minimized.

Copy link
Collaborator

Keats commented Aug 22, 2018

trishume/syntect#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

This comment has been minimized.

Copy link
Collaborator

Keats commented Nov 23, 2018

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

@Keats Keats closed this Nov 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment