masochist
masochist copied to clipboard
Add anchor tags to headings
For example on a page like "TypeScript cheatsheet", I'd like to be able to direct-link to a heading like this one:
<h2>The <code>satisfies</code> operator</h2>
Additionally, we could generate a table of contents using these anchors/links.
Basically should follow something roughly like what GitHub does. For example, in this repo's README.md file, we have this Markdown:
##### Rollback to a prior rev `$HASH`
And GitHub generates (formatted for readability):
<div class="markdown-heading" dir="auto">
<h5 tabindex="-1" class="heading-element" dir="auto">
Rollback to a prior rev <code>$HASH</code>
</h5>
<a
id="user-content-rollback-to-a-prior-rev-hash"
class="anchor"
aria-label="Permalink: Rollback to a prior rev $HASH"
href="#rollback-to-a-prior-rev-hash"
>
<svg
class="octicon octicon-link"
viewBox="0 0 16 16"
version="1.1"
width="16"
height="16"
aria-hidden="true"
>
<path
d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"
>
</path>
</svg>
</a>
</div>
So you can click on the link to #rollback-to-a-prior-rev-hash to go directly to the heading.