Customize syntax highlighting

#1

Hi, I am interested in contributing to the syntax highlighting part of zola. In particular, I would like to help out with #127. I also think it would be useful to provide a way to provide custom spans in a more general way, e.g. for adding colors to error messages manually without figuring out how to define an entirely new “language” for them.

Do you have any thoughts on this, and any tips on getting started with the codebase?

This post is related to this.

#2

I think the idea is to go through it one feature at a time: all the code is in components/rendering/src/markdown.rs and is essentially a mix of pulldown-cmark and syntect code, not really Zola.

I think the first bit to do is the line highlighting since it’s definitely supported and bat has it working so it shouldn’t be too hard.
Line numbers is a bit more tricky as I’m not certain it’s supported by Syntect and might need some additional work.

What do you have in mind with custom spans?

#3

Alright, I’ll try to add support for line highlighting. I can then look at line numbers.

As for custom spans, I’m not quite sure what is best. I was thinking that one could define a list of characters, and the syntax highlighting category that each character corresponds to, and then go through the text and remove those tokens, inserting colored spans instead. Thoughts?

#4

It appears that bat does line highlighting by changing the background color of the line, and not through any support in syntect.

// Line highlighting
let highlight_this_line =
    self.config.highlighted_lines.0.check(line_number) == RangeCheckResult::InRange;

let background_color = self
    .background_color_highlight
    .filter(|_| highlight_this_line);

link

#5

I’ve figured out what appears to be good way to do it. I’ll be submitting a PR this weekend.

#6

Amazing! That’s a feature I’ve been wanting for a long time

#7

Now that #1131 was merged, what would be the next steps? Do you have any ideas on how the html should look to support this?

The only issue I have with the feature is that the highlight doesn’t take the full line and doesn’t highlight empty lines. It would be very nice if it did but not mandatory for the initial version.

Or what about line numbers?

#8

I think I would look at some nice JS highlighters to see they do it.