search

ropensci-archive / roweb2

:no_entry: ARCHIVED :no_entry:
https://github.com/ropensci/roweb3
25 stars 72 forks source link

Trying new Chroma style #681

Closed maelle closed 4 years ago

maelle commented 4 years ago

In this PR preview you can see the fruity style that was mentioned by @sckott. Its colors are too bright I think? Edit: I put friendly in the preview. :angel: (the colors in fruity were really bright)

To try out another style from the Chroma gallery you can check out this PR locally and change the lines

  [markup.highlight]
    style = "friendly"

in config.toml

I've just tried "friendly" that I think looks great, but then I chose it for the R-hub blog. I don't mean we couldn't have the same, just that I have a bias.

Sadly monokai has too dark comments, I should actually change it on my own site.

Anyway, time to choose a style. :sparkles:

maelle commented 4 years ago

There's still #667 but it's not a default Chroma style and I'm not sure I correctly translated from hljs CSS to Chroma CSS classes.

maelle commented 4 years ago

I'm planning to change highlighting styles when #666 gets merged (nice PR number right). At the moment that PR chose "friendly".

Note that in the tech note of that PR I added a button to switch to dark mode https://deploy-preview-666--ropensci.netlify.app/technotes/2020/04/30/code-highlighting/#theme-toggle Maybe that's the perfect compromise? :slightly_smiling_face:

karthik commented 4 years ago

This style in the current deploy preview looks good to me

image

maelle commented 4 years ago

Cool.

I'm a bit disappointed by my change because even after increasing font size https://color.a11y.com/Contrast/ tells me https://deploy-preview-666--ropensci.netlify.app/technotes/2020/04/30/code-highlighting/ has too low contrast for some code color pairs. :sob:

maelle commented 4 years ago

I wonder whether the font is also a factor.

karthik commented 4 years ago

There will be a fixed width font in the css. Not quite sure what it is but it would be easy to swap around.

maelle commented 4 years ago

What do you mean by "there will be"?

karthik commented 4 years ago

There will be means a fixed width font for code/pre is defined somewhere in the css. I don't have access to it yet.

On Fri, Apr 24, 2020 at 10:42 AM Maëlle Salmon notifications@github.com wrote:

What do you mean by "there will be"?

— You are receiving this because your review was requested. Reply to this email directly, view it on GitHub https://github.com/ropensci/roweb2/pull/681#issuecomment-619154467, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABBZ7SSXARC27OM4HTQCFLROHFRPANCNFSM4MOXSITA .

maelle commented 4 years ago

Thanks, I'll explore that! :mag:

maelle commented 4 years ago

In the console, I don't see any fixed width applying to the elements when I select them. I'll need to explore further.

maelle commented 4 years ago

I thought a bit more and realized the problem lies with the contrast checker. The colors of that highlighting theme are actually partly bad, but that wasn't flagged on the R-hub blog because it uses in-line styling for code blocks as opposed to CSS classes + stylesheet.

So I'll need to try out more light themes. :upside_down_face:

maelle commented 4 years ago

https://maxchadwick.xyz/blog/syntax-highlighting-and-color-contrast-accessibility

https://blog.codepen.io/2019/09/09/new-high-contrast-syntax-highlighting-themes/

maelle commented 4 years ago

Ok, see new preview https://deploy-preview-666--ropensci.netlify.app/technotes/2020/04/30/code-highlighting/ :upside_down_face: (I followed the approach of https://maxchadwick.xyz/blog/syntax-highlighting-and-color-contrast-accessibility, we might want to switch to the approach https://blog.codepen.io/2019/09/09/new-high-contrast-syntax-highlighting-themes/ i.e. professional help later.