Github README anchor links

gistfile1.md

To create anchor links that jump down to different sections of a README (as in an interactive table of contents), first create a heading:
#Real Cool Heading

The anchor link for that heading is the lowercase heading name with dashes where there are spaces. You can always get the anchor name by visiting the README on Github.com and clicking on the anchor that appears when you hover to the left of the heading. Copy everything starting at the #:
#real-cool-heading

Wherever you want to link to your Real Cool Heading section, put your desired text in brackets, followed by the anchor link in parentheses:
[Go to Real Cool Heading section](#real-cool-heading)

See! Easy: Go to Real Cool Heading section

#Real Cool Heading
This is a real cool heading with some real cool content.

Used aforementioned steps with - instead of # and it helped. Thanks.

Take into account to:

• Make all lowercase
• Remove anything that is not a letter, number, space or hyphen, like :, ', etc
• Change any space to a hyphen.

Take into account to:

• Make all lowercase
• Remove anything that is not a letter, number, space or hyphen, like :, ', etc
• Change any space to a hyphen.

Is there any way for me to add '/' between two words?

@Sukhevver, See this: https://github.com/fefong/markdown_readme#code

Very helpful. Thank you.

@sergeiudris

painfully, github's markdown/rst/asciidoc do not allow to give a header a custom anchor id/link

Actually, it does. Here's how:

<a name="custom_anchor_name"></a>
# some header

Now, link to it with:

[click here to jump to my anchor](#custom_anchor_name)

I do that in my readme here: https://github.com/ElectricRCAircraftGuy/AlfaWiFiAdapterSoftware.

Ex: https://github.com/ElectricRCAircraftGuy/AlfaWiFiAdapterSoftware#AWUS036NH

Something else you might find useful:

1. center and resize images: https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md

does it work for a ### heading

does it work for a ### heading

Yes. (I use it for plenty of ### headings in my readme files)

By the way, it's worth noting that vscode's markdown parser gets confused by:

<a name="custom_anchor_name"></a>
# some header

The a-element makes the header lose its "blue highlighting", making it hard to scan through.

To fix this, I add an html comment before the a-element:

<!----><a name="custom_anchor_name"></a>
# some header

Before:

After:

Does it work when there are numbers on the heading?
Example:

1.1 Heading

Does it work when there are numbers on the heading?

It should, yes. Too lazy to confirm, but I'm 90% sure it will work.

However, make sure you're using the correct auto-generated url (you can right click the anchor icon next to it when hovering, when it's in a readme page, to make sure you get the correct link).

If you're using the manual anchor name (as shown in my previous post), then it is unaffected by the header's text/contents. (you could even remove the header, and the anchor would still work)

IDK if there has been a recent change to the parser since September 16th when the last comment was made in this thread, but the Markdown Preview parser seems to be working differently now as I get highlighting when I don't use the comment. Also I can't seem to get the Anchor links to work, is anyone successfully adding links in there CHANGELOGS.md or README.md files in their VSCode extensions?

SUCCESS AT LAST!

So I got it to work for VSCode extensions & CHANGELOGS, however, the HTML Attribute name fails to work in the VSCode Markdown-preview env.

This is the exact code I used, except that the comment was replaced with a bunch of CHANGELOG.md entries.

[end of file](#eof)

<!-- markdown code between the link & anchor-tag -->

<a id="eof"></a>

# eof

If you want to see the actual formatting of the links in a working document, just install the VSCode extension recently released by Microsoft that allows developers to browse the contents of other developers published extensions: Browse Extension's Publish Contents.

You can probably find the links working in other extensions, but I can guarantee you that you will find working versions of the anchor-links located in the theme that I just published: JAYD3V.developers-dojo

IDK if there has been a recent change to the parser since September 16th when the last comment was made in this thread, but the Markdown Preview parser seems to be working differently now as I get highlighting when I don't use the comment. Also I can't seem to get the Anchor links to work, is anyone successfully adding links in there CHANGELOGS.md or README.md files in their VSCode extensions?

---

Response to my own post

I FIGURED IT OUT:

There is another post I already made about it in this thread than shows a code snippet that works in VS-Code.

I wonder if it matters whether one uses "id" vs "name" for the anchor link.

name has been working fine for me so far, but it's possible that id works in more programs/environments.

I couldn't get name to work in V.S. Code, however, that was while testing the README.md document using the VS-Code Markdown-preview extension that comes with the open source editor "out-of-the-box". When viewing a public extension — or extensions — from inside in the VS Code editor, using the extensions view, different software is used to parse and render the markdown. In other words, its really hard to tell what will work where, as there are several small markdown parsers out there, and no standardization among them that I know of. Would be nice to see someone make an attempt at standardization though.

This does not seem to work.

Hey folks, I would like to know how I can add a "Scroll-to-Top" button in the README.md file . 
This "Scroll-to-Top" button takes you to one particular part of the README.md file.

Take into account to:

• Make all lowercase
• Remove anything that is not a letter, number, space or hyphen, like :, ', etc
• Change any space to a hyphen.

Reall nice!

@sergeiudris

painfully, github's markdown/rst/asciidoc do not allow to give a header a custom anchor id/link

Actually, it does. Here's how:

<a name="custom_anchor_name"></a>
# some header

Now, link to it with:

[click here to jump to my anchor](#custom_anchor_name)

I do that in my readme here: https://github.com/ElectricRCAircraftGuy/AlfaWiFiAdapterSoftware.

Ex: https://github.com/ElectricRCAircraftGuy/AlfaWiFiAdapterSoftware#AWUS036NH

Something else you might find useful:

1. center and resize images: https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md

life saver!

@Heatescape 😄
Glad it helped.

For anyone still wondering how it works, you can use

[Starting the application](#starting-the-application)

simply with the header # Starting the application

<a name="custom_anchor_name"></a>
# some header

There is a caveat which is missed on here, doing this doesn't change the header anchor to custom_anchor_name, the header will stay as it's written, what it actually does is creates a new anchor link above the header for you to link to instead. But this doesn't account for the Github users knowing this, and clicking the header link to grab it's URL.

I wish there was a way to actually change the header anchor instead of doing this, but doesn't look like there is.

[Fancy link](wiki#section-name) for ### Section name
works for me