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

Bootstrap 5 color for inline code is extremely bright and not consistent with code blocks #2007

Closed
DavisVaughan opened this issue Jan 10, 2022 · 8 comments
Labels
feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues
Milestone

Comments

@DavisVaughan
Copy link
Member

With the bootstrap 5 theme (and not using tidytemplate), we get an extremely bright default blue color. I personally feel it is a bit too harsh:

Screen Shot 2022-01-10 at 3 24 54 PM

It is also inconsistent with the blue color used for code blocks (I like that blue a lot more):

Screen Shot 2022-01-10 at 3 30 04 PM

From Hadley:

basically what you are asking for is for code to get the same colour as span.kw. The inconsistency arises because the blue in inline code comes from the bs4 primary colour and the blue colour in code blocks comes from the syntax highlighting theme

@hadley
Copy link
Member

hadley commented Jan 10, 2022

I think we can resolve by setting also setting foreground and background colours for bare code in syntax-highlight.R from the Keyword class.

@DavisVaughan
Copy link
Member Author

Screen Shot 2022-01-25 at 10 16 50 AM

I think this should also fix this issue where in tidymodels we use a primary color but it doesn't show up in the code blocks?

@hadley
Copy link
Member

hadley commented Jan 25, 2022

@DavisVaughan yeah, because the primary colour doesn't affect syntax highlighting in <pre> blocks.

@jplecavalier
Copy link
Contributor

@DavisVaughan the arrow-light highlight theming (default) override the pre background color. An easy fix would be to create a pkgdown/extra.scss file and define the following

pre {background-color: $code-bg}

Another option would be to choose a theme that is not overwriting the pre background color as atom-one-light.

@hadley hadley added feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues labels May 31, 2022
@hadley hadley added this to the v2.0.4 milestone May 31, 2022
@hadley
Copy link
Member

hadley commented Jun 7, 2022

I think I've decided to make inline code links match the styling of inline code, for the same reason that the styling of code block links matches the styling of code — the links are supposed to be an optional extra that takes you to additional details if you want them, not to be as prominent as a regular link.

@DavisVaughan
Copy link
Member Author

Looks good to me. Here is a tidymodels example and a bootstrap 5 (non tidytemplate) example. Both look good to me. Agree about them being code first, link second - and they shouldn't get in the way of you reading the paragraph.

(Ignore my direct link to purrr::map() in the second one)

Screen Shot 2022-06-07 at 6 27 58 PM

Screen Shot 2022-06-07 at 6 28 15 PM

@hadley
Copy link
Member

hadley commented Jun 7, 2022

Why is one purrr:map() bright blue on the slider readme? Is that a link you added by hand?

@DavisVaughan
Copy link
Member Author

Yes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature a feature request or enhancement front end 🌷 General HTML, CSS, and JS issues
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants