Skip to content

Add Supported Color Models to Basic Writing Syntax #18478

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

Merged
merged 10 commits into from
Jul 11, 2022

Conversation

aisgbnok
Copy link
Contributor

@aisgbnok aisgbnok commented Jun 7, 2022

Why:

Closes #17312

What's being changed (if available, include any code snippets, screenshots, or gifs):

Note
I decided to put the section directly under Quoting code because it follows similar syntax and is related; however, feel free to move this section if you believe there is a better place.

Added documentation for the three supported color models (HEX, RGB, HSL) in a table similar to the "Styling text" table.

Check off the following:

  • I have reviewed my changes in staging (look for the "Automatically generated comment" and click the links in the "Preview" column to view your latest changes).
  • For content changes, I have completed the self-review checklist.

Writer impact (This section is for GitHub staff members only):

  • This pull request impacts the contribution experience
    • I have added the 'writer impact' label
    • I have added a description and/or a video demo of the changes below (e.g. a "before and after video")

@github-actions github-actions bot added the triage Do not begin working on this issue until triaged by the team label Jun 7, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2022

Automatically generated comment ℹ️

This comment is automatically generated and will be overwritten every time changes are committed to this branch.

The table contains an overview of files in the content directory that have been changed in this pull request. It's provided to make it easy to review your changes on the staging site. Please note that changes to the data directory will not show up in this table.


Content directory changes

You may find it useful to copy this table into the pull request summary. There you can edit it to share links to important articles or changes and to give a high-level overview of how the changes in your pull request support the overall goals of the pull request.

Source Preview Production What Changed
get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md fpt
ghec
ghes@ 3.5 3.4 3.3 3.2 3.1
ghae
fpt
ghec
ghes@ 3.5 3.4 3.3 3.2 3.1
ghae

@aisgbnok

This comment was marked as duplicate.

@cmwilson21 cmwilson21 added content This issue or pull request belongs to the Docs Content team waiting for review Issue/PR is waiting for a writer's review and removed triage Do not begin working on this issue until triaged by the team labels Jun 8, 2022
@cmwilson21
Copy link
Contributor

@aisgbnok Thanks so much for opening a PR! I'll get this triaged for review ⚡

@aisgbnok

This comment was marked as outdated.

@aisgbnok
Copy link
Contributor Author

aisgbnok commented Jun 9, 2022

I based my syntax on the World Wide Web Consortium's CSS Color Module Level 3.

While those links may be helpful, I decided against linking them because I don't think GitHub Docs needs to explain how web colors work. It could also be further confusing because the GitHub supported color models don't support the three hexadecimal characters format, as listed in W3C.

I included a note for the whitespaces, but wasn't sure if I should add one for the HEX requiring six hexadecimal characters.
Works: #FFFFFF Doesn't: #FFF

{% note %}
**Note:** A supported color model cannot have any leading or trailing spaces within the backticks.
{% endnote %}

I think it's fine because the syntax column that I have only lists the six-character version. If someone tries three characters they should realize pretty quickly that six are required.

@janiceilene
Copy link
Contributor

@aisgbnok Thanks so much for including all of this helpful information into the decisions you made 😍

We don't support .svg, if you could update these to be .png that would be super helpful. Thanks again!

@aisgbnok
Copy link
Contributor Author

Thanks, @janiceilene, I have replaced the .svg files with .png files. Let me know if there is anything else I can do!

Copy link
Contributor

@hubwriter hubwriter left a comment

Choose a reason for hiding this comment

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

Hi @aisgbnok - This looks really good. Thanks.

However, when I tried this out for myself in a readme it didn't work. I used the markdown you give as an example and it rendered like this:

image

I was expecting it to render as shown in your new section:

image

You can see this here: https://github.com/hubwriter/hubwriter-test/blob/master/README.md

I tried this in Chrome, Firefox, and Safari but the colored circle you show didn't show up.

Could you clarify how/where you get this markdown to render as shown in your images? Thanks

@aisgbnok
Copy link
Contributor Author

aisgbnok commented Jul 1, 2022

@hubwriter, unfortunately, it seems like it only renders in Issue/PR descriptions or comments. I should have tested in a readme as well.

Color Syntax Example Output
HEX `#RRGGBB` `#0969DA` #0969DA
RGB `rgb(R,G,B)` `rgb(9, 105, 218)` rgb(9, 105, 218)
HSL `hsl(H,S,L)` `hsl(212, 92%, 45%)` hsl(212, 92%, 45%)

Should we scratch the whole section or add a warning note that it does not work in markdown files but will work elsewhere? Apologies for this oversight, thanks!

@aisgbnok
Copy link
Contributor Author

aisgbnok commented Jul 1, 2022

The background color should be #ffffff for light mode and #0d1117 for dark mode.

@hubwriter
Copy link
Contributor

@aisgbnok - Ah, that makes sense. Thanks.

I think it would be a shame to lose this entirely.

I'd suggest making a couple of changes.

Change:

You can call out color within a sentence with single backticks. A supported color model within backticks will display a visualization of the color.

to:

In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

And also change:

Note: A supported color model cannot have any leading or trailing spaces within the backticks.

to:

Notes:

  • A supported color model cannot have any leading or trailing spaces within the backticks.
  • The visualization of the color is only supported in issues, pull requests, and discussions.

@aisgbnok
Copy link
Contributor Author

aisgbnok commented Jul 1, 2022

@hubwriter, thanks, I committed your suggestions.

@hubwriter
Copy link
Contributor

@aisgbnok - That's great. Many thanks for your help. 🎖️

I've approved this to be merged. We have a merge freeze on the repo until 11 July but we'll get this merged/published after that. 🚀

@hubwriter hubwriter enabled auto-merge (squash) July 1, 2022 16:03
@hubwriter hubwriter removed the waiting for review Issue/PR is waiting for a writer's review label Jul 1, 2022
@hubwriter hubwriter added the ready to merge This pull request is ready to merge label Jul 1, 2022
@hubwriter hubwriter merged commit c641797 into github:main Jul 11, 2022
@github-actions
Copy link
Contributor

Thanks very much for contributing! Your pull request has been merged 🎉 You should see your changes appear on the site in approximately 24 hours. If you're looking for your next contribution, check out our help wanted issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
content This issue or pull request belongs to the Docs Content team ready to merge This pull request is ready to merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Document markdown color rendering
4 participants