Skip to content

Commit 221daed

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 <johannes.schindelin@gmx.de>
1 parent 3ed136b commit 221daed

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
@@ -370,3 +370,11 @@ body.page {
370370
.markdown-important {
371371
border-left: .25em solid #f34f29;
372372
}
373+
.anchor {
374+
transform: translateX(-80%) scale(.6);
375+
position: absolute;
376+
}
377+
378+
:is(h1, h2, h3, h4):not(:hover) .anchor {
379+
display: none;
380+
}

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)