DOC-12226 disambiguate code links #182
Conversation
Code links are hard to see because they look like code, and not like links. We override `a code` to reset the link formatting for this case.
|
Need to do a preview build with https://github.com/couchbase/docs-ui/releases/download/DOC-12226-code-links-1/ui-bundle.zip to verify |
sarahlwelton
left a comment
sarahlwelton
left a comment
There was a problem hiding this comment.
Looks like this causes no collisions when the text is bolded, too. Think it's straightforward, honestly don't think there's any issues.
ElliotFrancisHunter
left a comment
ElliotFrancisHunter
left a comment
There was a problem hiding this comment.
Yes, yes one thousand times yes!! 👍🏼 ❤️
simon-dew
left a comment
simon-dew
left a comment
There was a problem hiding this comment.
Is there an example of this specific use case 👇 in the preview?
|
|
||
| a code { | ||
| color: var(--color-link); | ||
| background-color: transparent; |
There was a problem hiding this comment.
Wait, so what does it look like if you have a longer run of inline code and only some of it is a link? Does the link lose its background even though the rest of the code has a shaded background?
<code>I'm code! <a href="example.com">And I'm a link!</a> But I am not!</code>There was a problem hiding this comment.
I did check this for e.g. code listings with links, possibly locally (I think there is an example in Server docs I'll try to dig up).
That wasn't a problem because, as in your snippet above, it's code a whereas the CSS only applies to a code 👍
There was a problem hiding this comment.
Yeah what I'm thinking of is probably an edge case. This PR fixes the immediate problem. LGTM
Code links are hard to see because they look like code, and not like links. We override
a codeto reset the link formatting for this case.