fix(markdown): clean heading links — wrap text in anchor instead of # marker#70
fix(markdown): clean heading links — wrap text in anchor instead of # marker#70
Conversation
…# marker Replaces TocExtension permalink='#' with a custom HeadingAnchorTreeprocessor that wraps heading text in <a class="heading-anchor" href="#id">. Updates all three bundled themes to style .heading-anchor instead of .headerlink. Closes #68. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Updates SquishMark’s Markdown rendering so headings link cleanly to their own anchors by wrapping the heading text in an <a class="heading-anchor" href="#...">...</a> instead of rendering a visible # permalink marker, and aligns bundled themes/tests with the new markup.
Changes:
- Adds a custom Python-Markdown treeprocessor/extension to wrap heading contents in a self-referencing anchor while disabling
TocExtensionpermalinks. - Updates bundled themes to style
.heading-anchor(replacing.headerlinkstyling). - Updates/renames the markdown heading permalink test to assert the new behavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
src/squishmark/services/markdown.py |
Adds HeadingAnchorTreeprocessor + extension and switches TocExtension(permalink="#") to permalink=False. |
tests/test_markdown.py |
Renames and updates the heading anchor test for the new markup. |
themes/default/static/style.css |
Adds .heading-anchor styling for default theme. |
themes/blue-tech/static/style.css |
Replaces .headerlink styles with .heading-anchor styles. |
themes/terminal/static/css/style.css |
Replaces .headerlink styles with .heading-anchor styles. |
You can also share your feedback on Copilot code review. Take the survey.
…test coverage - Skip headings that already contain <a> descendants to avoid invalid nested anchors - Move .heading-anchor rules after general link rules in all three themes so the cascade works correctly - Add explicit assertion that heading text is inside the anchor element - Add test for linked headings not getting wrapped Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Playwright testing — all three themes verifiedTested locally against all three bundled themes with a fresh browser session (no cache). HTML structure<h2 id="stage-1-denial"><a class="heading-anchor" href="#stage-1-denial">Stage 1: Denial</a></h2>No Results
CSS cascade fix confirmed working — anchors inherit the heading color rather than the general link color in all themes. — Claude |
Summary
TocExtension(permalink="#")withpermalink=False+ a customHeadingAnchorTreeprocessorthat wraps heading text in<a class="heading-anchor" href="#id">#marker is gone from all themes; heading text itself is now the link target.heading-anchorinstead of.headerlinktest_heading_anchor_uses_hash→test_heading_text_is_anchor_linkwith updated assertionsBefore:
<h2 id="hello-world">Hello World<a class="headerlink" href="#hello-world">#</a></h2>After:
<h2 id="hello-world"><a href="#hello-world" class="heading-anchor">Hello World</a></h2>Closes #68