Skip to content

Commit 716dca3

Browse files
committed
Offer anchors for the headings
While all of the headings already have an ID and therefore allow deep links, it is cumbersome to figure out what the exact ID is. Let's copy the trick I implemented in git-for-windows/git-snapshots@3e10e48a and in git-for-windows/git-snapshots@0dff3b9a: This will show a clickable link symbol when hovering over a heading. Signed-off-by: Johannes Schindelin <[email protected]>
1 parent 6b9d4c3 commit 716dca3

File tree

2 files changed

+11
-1
lines changed

2 files changed

+11
-1
lines changed

assets/sass/style.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -366,3 +366,11 @@ body.page {
366366
.markdown-important {
367367
border-left: .25em solid #f34f29;
368368
}
369+
.anchor {
370+
transform: translateX(-80%) scale(.6);
371+
position: absolute;
372+
}
373+
374+
:is(h1, h2, h3, h4):not(:hover) .anchor {
375+
display: none;
376+
}

layouts/_default/single.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{{ define "main" }}
2-
{{ replace .Content "<p>[!IMPORTANT]" "<p class=\"markdown-important\">" | safeHTML }}
2+
{{ replace .Content "<p>[!IMPORTANT]" "<p class=\"markdown-important\">" |
3+
replaceRE "(<h[1-4] id=\"([^\"]+)\"[^>]*>)" `${0}<a class="anchor" href="#${2}">&#128279;</a>` |
4+
safeHTML }}
35
{{ end }}

0 commit comments

Comments
 (0)