DOC-13347 fix unreadable inline example #195
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
osfameron
force-pushed
the
DOC-13347-override-default-css-for-redoc
branch
from
9c332a7 to
d22c6f3
Compare
Our highlightjs style breaks redocly inline examples, so we ensure it is ignored. Q: should we instead disable highlightjs for these pages?
osfameron
force-pushed
the
DOC-13347-override-default-css-for-redoc
branch
from
d22c6f3 to
25d9d45
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This is clearly "intentional" but gives terrible results on many tables. For example the metrics lists in this ticket, though they're strictly already semi-abusing the table syntax to display a list of cards... It feels like we add a feature by: * removing it (suddenly, many basic tables work again, like the one in original ticket) * wait for writers/stakeholders to point out which tables need to be fixed with responsive CSS and deal at that point.
There was a problem hiding this comment.
Pull Request Overview
This PR ensures inline code examples in Redocly render correctly by overriding Highlight.js comment styles and disables outdated responsive table CSS.
- Overrides Highlight.js comment and meta colors within Redoc to inherit surrounding text color.
- Forces table styles to apply at all viewports and comments out old responsive table rules.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/css/table.css | Changed breakpoint to always apply table styles and commented out old responsive block. |
| src/css/base.css | Added CSS rules to reset Highlight.js comment/meta coloring in Redoc. |
Comments suppressed due to low confidence (1)
src/css/base.css:81
- [nitpick] It may be helpful to add a comment explaining why these rules override Highlight.js styles for Redoc inline examples to aid future maintainers.
#redoc .hljs-comment,
|
|
||
| @media screen and (min-width: 768px) { | ||
| @media screen and (min-width: 1px /*768px*/) { |
There was a problem hiding this comment.
[nitpick] The inline comment inside the media query breakpoint may be confusing. Consider removing the commented '/768px/' or moving it to a clear code comment above the rule for clarity.
Copilot uses AI. Check for mistakes.
| @@ -212,6 +212,7 @@ table.table-tutorial tr td:last-child { | |||
| } | |||
| } | |||
|
|
|||
| /* This "responsive" table CSS is a bit odd, I'm not sure it is needed any more: | |||
There was a problem hiding this comment.
[nitpick] Commented-out code can accumulate and hinder maintainability. If this responsive block is no longer needed, consider removing it or adding a TODO with context and a link to the issue tracking its removal.
Copilot uses AI. Check for mistakes.
Our highlightjs style breaks redocly inline examples, so we ensure it is ignored.
Q: should we instead disable highlightjs for these pages?
Bundled DOC-13355 in subsequent commit