masochist icon indicating copy to clipboard operation
masochist copied to clipboard

Add anchor tags to headings

Open wincent opened this issue 9 months ago • 0 comments

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.

wincent avatar Mar 17 '25 09:03 wincent