Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Markdown, what is the best way to link to a fragment of a page, i.e. #some_id?

Tags:

html

markdown

People also ask

How do you reference a link in Markdown?

Markdown supports two style of links: inline and reference. In both styles, the link text is delimited by [square brackets]. To create an inline link, use a set of regular parentheses immediately after the link text's closing square bracket.

What is anchor in Markdown?

Markdown Anchor supports the hashmark, so a link to an anchor in the page would simply be [Pookie](#pookie) Generating the anchor is not actually supported in Gruber Markdown, but is in other implementations, such as Markdown Extra. In Markdown Extra, the anchor ID is appended to a header or subhead with {#pookie} .

What is a Markdown URL?

Markdown is a markup language used for formatting text in input fields where common tools for text formats are missing. For example, Markdown can be used to create headings or bold, italic or linked text. The syntax is simplified compared to html code.


See this answer.

In summary make a destination with

<a name="sometext"></a>

inserted anywhere in your markdown markup (for example in a header:

## heading<a name="headin"></a>

and link to it using the markdown linkage:

[This is the link text](#headin)

or

[some text](#sometext)

Don't use <div> -- this will mess up the layout for many renderers.

(I have changed id= to name= above. See this answer for the tedious explanation.)


I guess this depends on what you're using to generate html from your markdown. I noticed, that jekyll (it's used by gihub.io pages by default) automatically adds the id="" attribute to headings in the html it generates.

For example if you're markdown is

My header
---------

The resulting html will look like this:

<h2 id="my-header">My header</h2>

So you can link to it simply by [My link](#my-header)


With the PHP version of Markdown, you can also link headers to fragment identifiers within the page using a syntax like either of the following, as documented here

Header 1            {#header1}
========

## Header 2 ##      {#header2}

and then

[Link back to header 1](#header1)
[Link back to header 2](#header2)

Unfortunately this syntax is currently only supported for headers, but at least it could be useful for building a table of contents.


The destination anchor for a link in an HTML page may be any element with an id attribute. See Links on the W3C site. Here's a quote from the relevant section:

Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute).

Markdown treats HTML as HTML (see Inline HTML), so you can create your fragment identifiers from any element you like. If, for example, you want to link to a paragraph, just wrap the paragraph in a paragraph tag, and include an id:

<p id="mylink">Lorem ipsum dolor sit amet...</p>

Then use your standard Markdown [My link](#mylink) to create a link to fragment anchor. This will help to keep your HTML clean, as there's no need for extra markup.


For anyone use Visual Studio Team Foundation Server (TFS) 2015, it really does not like embedded <a> or <div> elements, at least in headers. It also doesn't like emoji in headers either:

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

Gets translated to:

<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>

And so links should either use that id (which breaks this and other preview extensions in Visual Studio), or remove the emoji:

Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration

Where the latter version works both online in TFS and in the markdown preview of Visual Studio.