How to link to a named anchor in Multimarkdown?

Question

I have come across a number of mentions of MultiMarkdown's support for internal links / named anchors but I am unable to find a single example of how to actually do it.

So, what is the syntax for denoting the named anchor, and what is the syntax for linking to it the same as linking to any other URLs (only using #foo instead of http://....)?

Solution 1

Taken from the Multimarkdown Users Guide (thanks to @MultiMarkdown on Twitter for pointing it out)

[Some Text][]will link to a header named “Some Text”
e.g.

### Some Text ###

An optional label of your choosing to help disambiguate cases where multiple headers have the same title:

### Overview [MultiMarkdownOverview] ##

This allows you to use [MultiMarkdownOverview] to refer to this section specifically, and not another section named Overview. This works with atx- or settext-style headers.

If you have already defined an anchor using the same id that is used by a header, then the defined anchor takes precedence.

In addition to headers within the document, you can provide labels for images and tables which can then be used for cross-references as well.

Solution 2

In standard Markdown, place an anchor <a name="abcd"></a> where you want to link to and refer to it on the same page by [link text](#abcd).

(This uses name= and not id=, for reasons explained in this answer.)

Remote references can use [link text](http://...#abcd) of course.

This works like a dream, provided you have control over the source and target texts. The anchor can even appear in a heading, thus:

### <a name="head1234"></a>A Heading in this SO entry!

produces:

A Heading in this SO entry!

and we can even link to it so:

and we can even [link](#head1234) to it so:

(On SO, the link doesn't work because the anchor is stripped.)

Solution 3

If you have headers in the markdown files, you can directly link them in the file.

Markdown Header:

## The Header

this will generate an implicit id #the-header (replace internal spaces with hyphens and make lowercase).

To navigate to this id, you can create the link like this:

[Link to Header](#the-header)

This is equivalent to:

<a href="#the-header">Link to Header</a>

Please note the reference's name is a lower-case #header.

Solution 4

I tested Github Flavored Markdown for a while and can summarize with four rules:

1. punctuation marks will be dropped
2. leading white spaces will be dropped
3. upper case will be converted to lower
4. spaces between letters will be converted to -

For example, if your section is named this:

## 1.1 Hello World

Create a link to it this way:

[Link](#11-hello-world)

Solution 5

The best way to create internal links (related with sections) is create list but instead of link, put #section or #section-title if the header includes spaces.

Markdown

Go to section
* [Hello](#hello)  
* [Hello World](#hello-world)
* [Another section](#new-section) <-- it's called 'Another section' in this list but refers to 'New section'


## Hello
### Hello World
## New section

List preview

Go to section
Hello           <-- [Hello](#hello)                 -- go to `Hello` section
Hello World     <-- [Hello World](#hello world)     -- go to `Hello World` section
Another section <-- [Another section](#new-section) -- go to `New section`

HTML

<p>Go to section</p>
<ul>
    <li><a href="#hello">Hello</a></li>
    <li><a href="#hello-world">Hello World</a></li>
    <li><a href="#new-section">Another section</a> &lt;– it’s called ‘Another section’ in this list but refers to ‘New section’</li>
</ul>
<h2 id="hello">Hello</h2>
<h3 id="hello-world">Hello World</h3>
<h2 id="new-section">New section</h2>

It doesn't matter whether it's h1, h2, h3, etc. header, you always refer to it using just one #.
All references in section list should be converted to lowercase text as it is shown in the example above.

The link to the section should be lowercase. It won't work otherwise. This technique works very well for all Markdown variants, also MultiMarkdown.

Currently I'm using the Pandoc to convert documents format. It's much better than MultiMarkdown.
Test Pandoc here

View more solutions

Comments

[Steve Powell]

@jj1bdx I do now -- the <a id="id"></a> form is best. See this SO question/answer.

[Attila Lendvai]

FWIW, it doesn't work with emacs' markdown-mode as of 23.4.1.

[masukomi]

Markdown does not support footnotes. As such it won't work in most "Markdown" modes. MultiMarkdown, however supports a number of extensions that make life easier for writers.

[masukomi]

Nice addition Steve. I'd mark it as the answer except the question was about MultiMarkdown. Obviously people's votes are indicating that this was a helpful addition though. So, thanks.

[Dieter]

Fyi: Github markdown expects you to use name= instead of id, it seems.

[Steve Powell]

@Dieter: name= was deprecated in XHTML, but now I find that id= has a side-effect in HTML5, so I am reverting to name= in this answer.

[Vinney Kelly]

BitBucket seems to prefix the anchor id with "markdown-header-". So if your header is ## This Header ##, the link would be [To This Header](#markdown-header-this-header). If you aren't sure what the id of your header is, use a page inspector to see the HTML values.

[Tomáš Zato]

Is there any way to get this to work on StackOverflow?

[andig]

Github does not seem to support labels in headers?

[Devs love ZenUML]

This does not work (at least on codepen.io) when there is ':' in the header.

[masukomi]

that link is the documentation by the guy who wrote MultiMarkdown. Not sure what you're doing in codepen.io but i'm confident the docs are accurate. Keep in mind MULTIMarkdown NOT Markdown.

[Kedar Mhaswade]

Works on github-flavored-markdown (the ruby gem renders it as expected)

[Daryn]

This only works for the first time I click on the link. If I click on the link, it scrolls down and changes the URL. If I manually scroll up and click on the link again, it does not navigate back to the link. Anyone else experience this?

[Zelphir Kaltstahl]

Didn't work for me in Pandoc extended markdown, might work elsewhere.

[Zelphir Kaltstahl]

Didn't work for me in Pandoc extended markdown, might work elsewhere.

[masukomi]

@SaurabhM this will ONLY work IF your markdown to html converter DOES NOT adhere to the standard. The standard doesn't create anchor tags. Now, many don't adhere, but you should NOT expect this to work anywhere.

[masukomi]

as noted in other comments here. that will not work in any markdown -> html converter that actually follows the standard. Creating anchor tags in headings only happens in SOME converters. Furthemore, they're not going to all convert spaces to dashes. THIS CAN NOT not be counted on.

[rflw]

I'm using GitHub Markdown in Atom code editor which has a built-in package named "Markdown Preview". From preview mode I create an html files using context menu "Save as HTML...".

[masukomi]

yes, my point is that you can't count on your technique working anywhere else, and neither the question, nor your answer is specifically about markdown in Atom. The question isn't even about Markdown, it's about MultiMarkdown.

[Tom Kustermans]

I'm using this link method but it's not working for me. not sliding to the section/that header.

[Victor Augusto]

Give a heads up to case sensitive. If you define a ## Hello you should refer to it as [Whatever you want](#Hello)

[rflw]

It works but you have to use lowercase for link. [Section name](#link-to-section)

[hmijail]

Why oh why did we have to standardize in something as standard-less and half-baked as Markdown. Can't wait for AsciiDoc to take the lead.

[Spencer Pollock]

What if there are hyphens in the name? What does it convert to? Note, there are spaces between the words and the hyphens. example: ``` - [My - Header](#my---header) # My - Header ``` Would that be correct?

[bishop]

stackoverflow.com/a/17820138/2908724 for terminology on this style. I prefer "kebab-case".

[Sanmoy]

What if the header is "# The - Header"

[Rana Ghosh]

What do you do if the header has a / in it?

[Melvin Witte]

GitHub adds user-content before the name of the header: [Link](user-content-the-header)

[OrenIshShalom]

GitHub will also make # 5.4 into user-content-54 and lose the .

[perepm]

Also works to add a "%20" where the blank space is supposed to be, but I guess a hyphen is much more elegant

[рüффп]

It does not seems to be supported in Bitbucket. I use the anchor <a name="link"> instead.

[рüффп]

It looks to be supported by BitBucket with name attribute (did not try the id attribute).

[robe007]

The Markdown solution worked for me. I used it inside VSCode and with Typora.

[Steven the Easily Amused]

All those conversions mean that it's a bit of a crap shoot to rely on anything the markdown formatter does to titles and headings. Much better, IMHO to use anchors (as the most upvoted answer recommends), that way links don't break because someone makes a grammar/spelling correction to a title and breaks untold thousands of internal (and external) links.

[Aelius]

If there are some symbols in the string such as /, #, + and others simply omit them; e.g. ## The Header++ has the same linking of the simple ##The Header . If you have multiple headers that reduce to the same link, the headers following the first should be numbered. For example if you have first #The Header and then #The Header++ the first link will be [Link to Header](#the-header), while the second [Link to second Header](#the-header-1)

[Gwyneth Llewelyn]

@SteventheEasilyAmused indeed — at the cost of polluting a Markdown file with HTML. Depending on the target/audience, this might be a good trade-off... or not. For a simple README.md which might be simply read with a non-Markdown viewer, it's best to leave all HTML off — it's less confusing to follow.