Skip to content

Instantly share code, notes, and snippets.

@asabaylus
Created July 8, 2012 14:12
Show Gist options
  • Save asabaylus/3071099 to your computer and use it in GitHub Desktop.
Save asabaylus/3071099 to your computer and use it in GitHub Desktop.
Github Markdown Heading Anchors

Anchors in Markdown

To create an anchor to a heading in github flavored markdown. Add - characters between each word in the heading and wrap the value in parens (#some-markdown-heading) so your link should look like so:

[create an anchor](#anchors-in-markdown)

@jdaw1
Copy link

jdaw1 commented Oct 22, 2022

Consider HTML <tr id="XXX">…. Then a link to #XXX is a link to that whole row. Clicking on a <a href="#XXX">to XXX</a> causes the whole row to be on the screen, if possible the top pixel of the row at the top of the screen (not always possible if row near end of page). This is good.

In Markdown, putting | <a name="XXX"></a> … |, and clicking on [to XXX](#XXX) jumps to the middle of the row, at least if there is an image in the row. The top half of the row isn’t visible: above top of viewport. This is not good.

Please, is there a known solution?

Jacks and Numbers
UnionJack One
UnionJack Two
UnionJack Three
UnionJack Four
UnionJack Five
UnionJack Six
UnionJack Seven
UnionJack Eight
UnionJack Nine
UnionJack Ten
UnionJack Eleven
UnionJack Twelve
UnionJack Thirteen
UnionJack Fourteen
UnionJack Fifteen
UnionJack Sixteen
UnionJack Seventeen
UnionJack Eighteen
UnionJack Nineteen
UnionJack Twenty
UnionJack TwentyOne
UnionJack TwentyTwo
UnionJack TwentyThree
UnionJack TwentyFour
UnionJack TwentyFive
UnionJack TwentySix
UnionJack TwentySeven
UnionJack TwentyEight
UnionJack TwentyNine
UnionJack Thirty
UnionJack ThirtyOne
UnionJack ThirtyTwo
UnionJack ThirtyThree
UnionJack ThirtyFour
UnionJack ThirtyFive
UnionJack ThirtySix

@jdaw1
Copy link

jdaw1 commented Oct 26, 2022

Solution found.
• The large image cannot be a link (which is what confounded me).
• Then wrap the <a names="…"></a> around the image.

@micmro
Copy link

micmro commented May 31, 2023

Just wanted to leave a note that this approach does have accessibility/semantic issues (ref: https://developers.google.com/style/headings-targets).

Unfortunately, Github does currently not support the extended markdown syntax heading-ids (e.g. ### My Heading {#my-heading-id}), so the most accessible approach would be to use the HTML equivalent <h3 id="my-heading-id">My Heading</h3> instead.

@Moonbase59
Copy link

Moonbase59 commented Apr 4, 2024

I needed a quick Markdown TOC generator that would be compatible with GitHub, so I made my own: gh-toc.

It’s basically a web page with some JavaScript: You paste in your Markdown and it generates a GitHub-compatible Table of Contents. Your browser does the work and nothing gets sent to the Internet.

Features:

  • Full Unicode support, all international characters.
  • Better handling of (hopefully) all underscore cases.
  • Correct handling of code with backticks ` inside.
  • Much better code block support (backticks, tildes, differing number of them).
  • YAML front matter support.
  • Optional output of the full Markdown file, ToC inserted between <!-- ToC begin --> and <!-- ToC end --> HTML comments, instead of just the ToC.
  • Optional named anchor generation for each ToC element (not needed for GitHub use).
  • Optional use of id instead name attribute in generated anchors.

Markdown test file included.

@k-Gillespie
Copy link

thank you

@Ricky4K
Copy link

Ricky4K commented Jul 10, 2024

Is there any way to cross reference to another files header?

For example:

File1 contains

# Title
## Description
Lorem Ipsum

File2 contains

# Data
Click here to see the Description from File 1: [Information](../File1#Description)

@Ricky4K
Copy link

Ricky4K commented Jul 10, 2024

Is there any way to cross reference to another files header?

For example:

File 1 contains

# Title
## Description
Lorem Ipsum

File2 contains

# Data
Click here to see the Description from File 1: [Information](../File1#Description)

Looks like it does work like that however keep in mind if you have special Characters as a File name (at least for me) it did not properly show up in VSC. However after just pasting it in manually and clicking it via the preview it should work out just fine. Note the %20 stands for a blank space character here.

For example:

File 1 contains

# Title
## Description
Lorem Ipsum

File2 contains

# Data
Click here to see the Description from File 1: [Information](../File%201#Description)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment