Skip to content
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

Fix Chroma line highlight style #36173

Merged

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Apr 14, 2022

This PR proposes to fix the typo of the class for the line highlight: .hl.hll (I've checked the other classes and they seem OK).

ℹ️ Nice to know, it is possible to retrieve the list of classes (and meaning) by executing hugo gen chromastyles > chroma.css ; cat chroma.css

The following examples can be reproduced by integrating the following code in one of our Markdown pages:

{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
// GetTitleFunc returns a func that can be used to transform a string to
// title case.
//
// The supported styles are
//
// - "Go" (strings.Title)
// - "AP" (see https://www.apstylebook.com/)
// - "Chicago" (see https://www.chicagomanualofstyle.org/home.html)
//
// If an unknown or empty style is provided, AP style is what you get.
func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}
{{< / highlight >}}

Before

(Nothing is highlighted)

Screenshot from 2022-04-14 19-09-07

With the modification

Screenshot from 2022-04-14 19-08-43

IMO white highlight is very difficult to see, so I tried in this PR --base02: #c8c8fa. Here is the rendering:

Screenshot from 2022-04-14 19-08-55

I'm not sure about the contrast and the color but that seemed the best choice regarding the available color palette.
If not we could introduce in the color palette of this file a light yellow 🤷

@julien-deramond julien-deramond requested a review from a team as a code owner April 14, 2022 17:18
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely an improvement. We can tweak the color later IMO because I don't think we really highlight anything right now (but I do believe we show a diff here and there).

@julien-deramond
Copy link
Member Author

Yes, we don't highlight anything right now. Diff is shown for example in the Migration guide but is based on another Chroma rule. So, as you said, let's focus on the color when we'll need it.

@mdo mdo merged commit fb21233 into twbs:main Apr 15, 2022
@julien-deramond julien-deramond deleted the main-jd-fix-chroma-syntax-highlighter branch April 15, 2022 06:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants