How to link to heading containing dot (.) or comma (,) in markdown file (Table of contents)?

user_4414252 0
Viewed 5304

In my Readme.MD markdown file I want to create Table of Contents (for Github). [TOC] (generated by Typora) doesn't show on Github. It shows like [TOC]. Some of my headings contain characters like a dot or a comma. Is there any way to link to these headings?

I tried almost everything I think, such as: [app.js File](#app.js-file), [app.js File](#app-js-file), [app.js](#app--js-file), [app.js](#app\.js-file), [app.js](#appjs-file). Nothing works.

Here is an example:

Table of contents:
[app.js](#app-js)
[script.js](#script.js)
[One, two, three](#one,-two,-three)

# app.js File
Some text

# script.js File
Some text

# One, two, three
Some text

P.S. Some people are talking about creating HTML-anchors (named), but how/where do you write them in your MD-file (in case it is the solution). Could you explain it please (I couldn't find any solution on the internet).

readme heading markdown hyperlink github
3 Answers

If you mouse over the header you want to link to in the rendered content you should see a link icon appear. Mouse over that icon to see what it's linking to, and use that as your target. I think you'll find the links named

  • appjs-file
  • scriptjs-file
  • one-two-three

This answer points to some logic that may drive link naming but I haven't been able to confirm.

As a side note, Markdown is designed to be easily read even in its raw form. I strongly recommend adding a space between the header hashes and header text and a blank line between the header and its content, e.g.

# app.js File

Some text

Some Markdown processors will require one or both of these to render properly.

user_3545770

Question 1

Is there any way to link to these headings(that contain punctuation marks)?

Yes. Drop all the punctuation marks and replace the spaces with hyphens. This works for Github but with some other markdown editors like for example at hashnode.com, you have to replace the punctuation marks with hyphens.

In your example above, I hadn't linked the full titles. That's why some didn't work. To fix the example you gave:

Table of contents:
[app.js](#appjs-file)
[script.js](#scriptjs-file)
[One, two, three](#one-two-three)

# app.js File
Some text

# script.js File
Some text

# One, two, three
Some text

Question 2

Some people are talking about creating HTML-anchors (named), but how/where do you write them in your MD-file (in case it is the solution)?

You add the HTML anchors right next to the heading you would like to link to on the same line. The link you provide in the table of contents should match the name of anchor in the heading but drop the hash.

Here's an example:

Table of contents:
[app.js](#app-js-file)
[script.js](#script-js-file)
[One, two, three](#one-two-three)

# app.js File <a name="app-js-file"></a>
Some text

# script.js File <a name="script-js-file"></a>
Some text

# One, two, three <a name="one-two-three"></a>
Some text

Here's a Github Gist to demonstrate that it works on Github.

user_129856440

In GitHub, if you hover over the section title words, a link icon appears to the left of the section title words. If you hover over the link icon , the URL for the webpage you're on appears at the bottom of the page (i.e., github.com/username/.../README.md). If you continue hovering over the link icon for a few seconds, that link then includes the appended section link (i.e., github.com/username/repo/edit/main/README.md#appjs-file).

Solution:

Table of contents:
[app.js File](#appjs-file)
[script.js File](#scriptjs-file)
[One, two, three](#one-two-three)

# app.js File
Some text

# script.js File
Some text

# One, two, three
Some text
user_164521690
Related