Skip to content

fix: improve .tsd-typography styles to better match GitHub#7

Open
jonathanhefner wants to merge 1 commit intoJulianWowra:mainfrom
jonathanhefner:tweak-styles-closer-to-github
Open

fix: improve .tsd-typography styles to better match GitHub#7
jonathanhefner wants to merge 1 commit intoJulianWowra:mainfrom
jonathanhefner:tweak-styles-closer-to-github

Conversation

@jonathanhefner
Copy link

Document pages (project documents, READMEs) rendered through this theme diverge significantly from GitHub's actual markdown styling.

Headings lack top margin and bottom borders, making them less functional as section breaks. Headings also have a bottom padding that pushes them closer to the text above them than the text they refer to.

Additionally: lists use square bullets instead of discs, prose is noticeably denser due to tighter line-height, inline code has incorrect vertical margin, and long code blocks overflow their containers instead of scrolling.

Changes:

  • Scope .tsd-panel > h* margin reset to :not(.tsd-typography) so API panels are unaffected while document headings get proper spacing
  • Add .tsd-typography base styles matching GitHub's markdown rendering: line-height 1.5, disc bullets with circle/square nesting, 32px list indent, 16px code block padding, overflow: auto on pre, inline code margin fix, semibold font-weight, link underlines on plain links
  • Add document page heading styles (scoped to .tsd-panel.tsd-typography to avoid affecting JSDoc comment prose on API pages): GitHub-accurate sizes, 24px top / 16px bottom margins, border-bottom on h1/h2, and override of TypeDoc's negative-margin panel heading defaults
Before After
before after

Document pages (project documents, READMEs) rendered through this theme
diverge significantly from GitHub's actual markdown styling.

Headings lack top margin and bottom borders, making them less functional
as section breaks. Headings also have a bottom padding that pushes them
closer to the text above them than the text they refer to.

Additionally: lists use square bullets instead of discs, prose is
noticeably denser due to tighter line-height, inline code has incorrect
vertical margin, and long code blocks overflow their containers instead
of scrolling.

Changes:

- Scope `.tsd-panel > h*` margin reset to `:not(.tsd-typography)` so API
  panels are unaffected while document headings get proper spacing
- Add `.tsd-typography` base styles matching GitHub's markdown
  rendering: line-height 1.5, disc bullets with circle/square nesting,
  32px list indent, 16px code block padding, overflow: auto on pre,
  inline code margin fix, semibold font-weight, link underlines on plain
  links
- Add document page heading styles (scoped to
  `.tsd-panel.tsd-typography` to avoid affecting JSDoc comment prose on
  API pages): GitHub-accurate sizes, 24px top / 16px bottom margins,
  border-bottom on h1/h2, and override of TypeDoc's negative-margin
  panel heading defaults

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant