Cross-reference named anchor in markdown

Question

Is there markdown syntax for the equivalent of   Take me to  lt a href   pookie  gt pookie lt  a gt          lt a name  pookie  gt this is pookie lt  a gt

User · Accepted Answer

Take me to  pookie   pookie    should be the correct markdown syntax to jump to the anchor point named pookie   To insert an anchor point of that name use HTML    lt a name  pookie  gt  lt  a gt    Markdown doesn t seem to mind where you put the anchor point  A useful place to put it is in a header  For example        lt a name  tith  gt  lt  a gt This is the Heading   works very well    I d demonstrate here but SO s renderer strips out the anchor    Note on self-closing tags and id  versus name   An earlier version of this post suggested using  lt a id  tith    gt   using the self-closing syntax for XHTML  and using the id attribute instead of name   XHTML allows for any tag to be  empty  and  self-closed    That is   lt tag   gt  is short-hand for  lt tag gt  lt  tag gt   a matched pair of tags with an empty body  Most browsers will accept XHTML  but some do not  To avoid cross-browser problems  close the tag explicitly using  lt tag gt  lt  tag gt   as recommended above   Finally  the attribute name  was deprecated in XHTML  so I originally used id   which everyone recognises  However  HTML5 now creates a global variable in JavaScript when using id   and this may not necessarily be what you want  So  using name  is now likely to be more friendly    Thanks to Slipp Douglas for explaining XHTML to me  and nailer for pointing out the HTML5 side-effect     see the comments and nailer s answer for more detail  name  appears to work everywhere  though it is deprecated in XHTML

User · Answer

I will quickly complement for cases where the header contains emojis  in that case it is simpler to just remove the emoji in the link of the reference  For example     Title 2       Take me to title 2   -title-2   There are some cases where this does not work for a weird reason  for example here in setup  The solution in that case is to include the whole code for the emoji as well

User · Answer

On bitbucket org the voted solution wouldn t work  Instead  when using headers  with      it is possible to reference them as anchors by prefixing them as  markdown-header-my-header-name  where  markdown-header- is an implicit prefix generated by the renderer  and the rest is the lower-cased header title with dashes replacing spaces   Example     My paragraph title   will produce an implicit anchor like this   markdown-header-my-paragraph-title   The whole URL before each anchor reference is optional  i e     Some text   markdown-header-my-paragraph-title    is equivalent of    Some text  https   bitbucket org some project some page markdown-header-my-paragraph-title     provided that they are in the same page   Source  https   bitbucket org tutorials markdowndemo overview  edit source of this  md file and look at how anchors are made

User · Answer

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    Github Flavored Markdown in Git repository pages  but not in Gists  automatically generates anchors with several markup tags on all headers  h1  h2  h3  etc    including    id  user-content-HEADERTEXT  class  anchor  href   HEADERTEXT  aria-hidden  true   this is for an svg link icon that displays on mouseover    Excluding the aria svg icon  when one writes      Header Title   Github generates     lt h1 gt  lt a id  user-content-header-title  class  anchor  href   header-title  gt Header Title lt  a gt  lt  h1 gt    Therefore  one need do nothing to create the header links  and can always link to them with    Link to the  Header Title   header-title

User · Answer

There s no readily available syntax to do this in the original Markdown syntax  but Markdown Extra provides a means to at least assign IDs to headers     which you can then link to easily  Note also that you can use regular HTML in both Markdown and Markdown Extra  and that the name attribute has been superseded by the id attribute in more recent versions of HTML

User · Answer

As we see  from the answers   there is no standard way for this  and different markdown processors would differ in their markdown extension that offer this kind of possibilities  With pandoc  you can get what you asked for like this  Take me to  pookie   pookie         this is pookie   pookie   This gives  with pandoc-2 9 2 1    lt p gt Take me to  lt a href  quot  pookie quot  gt pookie lt  a gt  lt  p gt   lt p gt     lt  p gt   lt p gt  lt span id  quot pookie quot  gt this is pookie lt  span gt  lt  p gt   One can also make an empty span with an anchor id  Take me to  pookie   pookie        this is pookie     pookie   which would produce   lt p gt Take me to  lt a href  quot  pookie quot  gt pookie lt  a gt  lt  p gt   lt p gt     lt  p gt   lt p gt this is pookie  lt span id  quot pookie quot  gt  lt  span gt  lt  p gt   Apart from this  for pandoc and for most common markdown generators  you have a simple self generated anchor in each header   See that and other answers here for convenient ways to  auto generate and refernce such anchors

User · Answer

Using the latest Markdown  you should be able to use the following syntax         name  anchorName    This should create the following HTML     lt a name  anchorName  gt  lt  a gt   If you wanted the anchor to have text  simply add the anchor text within the square brackets    Some Text     name  anchorName

User · Answer

For most common markdown generators  You have a simple self generated anchor in each header  For instance with pandoc  the generated anchor will be a kebab case slug of your header   echo  quot   Hello  world   quot    pandoc      gt   lt h1 id  quot hello-world quot  gt Hello  world  lt  h1 gt   Depending on which markdown parser you use  the anchor can change  take the exemple of symbolrush and La muerte Peluda answers  they are different    See this babelmark where you can see generated anchors depending on your markdown implementation

User · Answer

For anyone who is looking for a solution to this problem in GitBook  This is how I made it work  in GitBook   You need to tag your header explicitly  like this     My Anchored Heading   my-anchor    Then link to this anchor like this   link to my anchored heading   my-anchor    Solution  and additional examples  may be found here  https   seadude gitbooks io learn-gitbook

User · Answer

Late to the party  but I think this addition might be useful for people working with rmarkdown  In rmarkdown there is built-in support for references to headers in your document   Any header defined by     Header   can be referenced by   get me back to that  header   header    The following is a minimal standalone  rmd file that shows this behavior  It can be knitted to  pdf and  html   --- title   references in rmarkdown  output    html document  default   pdf document  default ---    Header  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text  Write some more text    Go back to that  header   header

User · Answer

Use a name  Using an id isn t necessary in HTML 5 and will create global variables in your JavaScript  See the HTML 5 specification  5 9 8 Navigating to a fragment identifier - both id and name are used   It s important to know that most browsers still turn IDs into global variables  Here s a quick test  Using a name avoids creating globals and any conflicts that may result   Example using a name   Take me to  pookie   pookie    And the destination anchor        lt a name  pookie  gt  lt  a gt Some heading

[html] Cross-reference (named anchor) in markdown

Note on self-closing tags and `id=` versus `name=`

Examples related to html

Examples related to anchor

Examples related to markdown

Examples related to cross-reference