docs css: not always obvious that code elements are links

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ X] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[X ] Other... Please describe: AIO docs-infra CSS

Current behavior

Currently, if something in code font is also a hyperlink, there is no visual indication until you hover over the text. Then, an underline appears and the cursor shape changes to indicate that it is a hyperlink.

This is true is all dgeni-generated docs, including both API ref and CLI command ref.

Expected behavior

Some readers have reported that they didn’t know these code elements are links.

The most recent report is about the table of schematics in ng generate. It wasn’t obvious that the items in this list link to more detail below. Minimally, if we can fix that case (code in a list, or code in a table?) that might help. Perhaps make the underline persistent, even without the hover?

It might be too much clutter to highlight hyperlinked code in larger syntax statements and code examples in the API ref. Know, however, that without a visual indicator it’s a learned behavior and extra step to try hovering to see if there is more info.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Help users more easily know when additional information is available with a single click.

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[petebacondarwin]

We have a dgeni processor that tries to “auto-link” code items. This goes through all the generated code snippets in the rendered HTML and tries to infer if a word in a snippet matches an API item. If so then it creates a link to it. This is quite good but does occasionally get it wrong - either missing an word that could have been linked or linking a word incorrectly. @sonukapoor has recently improved the algorithm for this so it is better than ever. But I am still nervous about highlighting them. I worry that we will then be inundated with issues of incorrect links… The auto-links are really just a bonus rather than a required link - perhaps you could think of them as Easter eggs? 😸🥚

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}