Question about highlighting

[myrthos]

I usually work in light mode, so I had not noticed it before, but today I looked at a page with syntax highlighting and noticed that it doesn't look too great in dark mode.
I tried to find on your documentation site if you use syntax highlighting anywhere, but could not find it. Just to see if it was on my side.
Instead, I tried it out in the latest Hinode version and added some syntax highlighting to one of the blog pages and it doesn't look to great in dark mode either in my opinion. So I wanted to check if this highlight coloring in dark mode is intentional from your side. If it is, I will just change it on my side.
Below the two example images.

This is what it looks like in light mode, which looks fine.

This is what it looks like in dark mode, which does not look so great (in my opinion), as the orange and blue texts are hardly readable.

This is what I used for the code block go-html-template {linenos=true,hl_Lines=["10-19"]}

And this is the code sample:

{{ $url := .url -}}
{{ $page := .page -}}

{{ $img := "" }}
{{ $remote := hasPrefix (lower $url) "http" }}
{{ if $remote }}
    {{ $img = resources.GetRemote $url -}}
{{ else }}
    {{ $img = resources.GetMatch $url -}}
    {{ if and (not $img) $page }}
        {{ $img = $page.Resources.GetMatch $url }}
        {{ if not $img }}
            <!-- Do we have a headless bundle? -->
            {{- $headless := $page.GetPage "headless" -}}
            {{- if $headless -}}
                {{ $img = $headless.Resources.GetMatch $url }}
            {{- end}}
        {{ end }}
    {{ end }}
{{ end }}

[markdumay]

Thanks! It looks awful indeed... ;-) I'll fix it - probably need to apply dark shading to the highlight background color.

[markdumay]

What about #373700? Replace the following line in package.json:

    "update:syntax:dark2": "replace-in-files --string=\"#ffffcc\" --replacement=\"#373700\" ./assets/scss/components/_syntax-dark.scss",

Run npm run create:syntax when done (note: requires hinode v0.18.0).

[markdumay]

The css .chroma .ln and .chroma .w require adjustment too - right now they fail the WCAG contrast ratio test.

"update:syntax:dark6": "replace-in-files --string=\"#6e7681\" --replacement=\"#999fa8\" ./assets/scss/components/_syntax-dark.scss",

[markdumay]

And finally, the current css for the .hl attribute does not render correctly on horizontally scrolling panels. Let's see if I can fix that.

[markdumay]

Adding the following seems to work:

.chroma {
    display: flex;
}

[myrthos]

Thanks, I can try that.
I am on Hinode 18. Due to some changes I should not have merged, it took the better part of last weekend to get to that point 😄

[markdumay]

Due to some changes I should not have merged, it took the better part of last weekend to get to that point

Yeah, I recognize that! Coding can sometimes be never-ending :-)

I'm releasing v0.18.1 soon, it should include the above changes.

[myrthos]

I've merged v0.18.1 and that looks indeed a lot better. Thanks.

There is one difference with the previous version, which is that in the previous version the filled area would fill until the end of the available space. Now it fills until the end of the longest line.

If you look on my site, this behavior can be noticed in the first and last code block.

That said, I'm OK with this solution as well.

[markdumay]

Ah indeed - probably the wrapper of the code block is not expanding properly. I’ll see if I can fix this.

[markdumay]

Great to see your work in progress btw - you already put in quite some effort! And thanks for kind words in the credits- appreciate it!

[myrthos]

You are welcome. I really like the theme and it feels like you have and are still putting lots of energy and love in it.

[markdumay]

I've looked into the highlight, adding the following style to assets/scss/components/_syntax.scss should fix it:

.chroma code {
    flex: 1;
}

[myrthos]

Great, I'll try that out later today. Thanks for looking into it.

[myrthos]

Forgot to mention that it indeed fixes the issue. Thanks for looking into that.