Highlighting improvements


#1

There are two things missing for the syntax highlighting to be really nice:

  1. line numbers: https://github.com/getzola/zola/issues/232
  2. ability to highlight spans/lines: https://github.com/getzola/zola/issues/127

For 2, syntect directly added support for highlighting so it should be straightforward.

The main blocker is how to let a user turn on those options.
See https://gohugo.io/content-management/syntax-highlighting/ for how Hugo does it but they use a shortcode instead of the classic Markdown codeblock.
This is a possibility as I don’t have a good idea on how to implement that with triple backticks since a syntax name is optional.


#2

The typical approach I’ve seen is to add it to the opening code fence, treating it as comma-separated. This is how options are done in rustdoc (e.g. ```rust,ignore,compile_fail,no_run,should_panic, to use a bunch that don’t actually fit well together!).

Something like this could do it:

```rust, linenos, hl_lines=3-8 10-20

But I must remark with this that I consider line highlighting to be insufficient: I require character highlighting. My FizzBuzz article is an example; I achieved that in my current Hyde-powered site by extending its syntax highlighting with an extra step that roughly turns « into <mark> and » into </mark>. (It doesn’t work perfectly with all languages, as the « may mess up the syntax highlighter, it still being there during syntax highlighting—but it worked for Rust, and that’s all I needed at the time. For best results, this would need to be integrated into the highlighter more perfectly.)

I’m slowly working on migrating to Zola, and I expect I’ll indefinitely maintain a fork for this and other reasons. (Another sample reason: inline syntax highlighting, which pure shortcodes are insufficient for.)

It’s moderately irrelevant, but I also find myself today wanting to combine languages, like diff+javascript to highlight JavaScript in a diff. I wonder whether I’ll need to write a syntax file with it, or if there’s some other way to handle it…


#3

That was my idea as well but markdown doesn’t require a language to be set. We could special case some keywords like linenos, hl_lines etc to avoid that issue though.

That approach definitely needs to be part of the syntax highlighter, to use the theme highlight colour. Granted you could also change the mark css manually. I had never though of character level highlighting though, that is interesting.

Sublime Text doesn’t do that so it is unlikely to happen automatically


#4

Some themes have an insufficient contrast ratio. The default theme base16-ocean-dark for example:

  • background color: #383838
  • comment color: #95815e
  • contrast ratio: 3.1

For small text (< 18pt), the Web Content Accessibility Guidelines require a contrast ratio of 4.5 for AA compliance and 7 for AAA compliance.


#5

That is a problem of the themes themselves, Zola is not tweaking any values.


#6

But the themes ship with Zola, so there’s at least some form of responsibility.