CODEWITHSUNDEEP
githubmarkdown
annedroiid
annedroiid

Reputation: 6637

Create a link to the header of another page in Github

Does anyone know how to create a link to the header of a different wiki page?

I know if I have a header ##Header name that I can link to it on that page by using (#header-name) as my link, but I want to link to that header from a different page. Is this possible?

ie. I want to have a table of contents that can link to the sub-sections of each wiki page as well as to the page itself.

Edit: I mean a way besides just using the url link
http://github.com/project/wiki/Wiki-Page#header-name

Upvotes: 10

Views: 13323

Answers (4)

Prince Wilson
Prince Wilson

Reputation: 175

EDIT 1: So totally wrong about before, I just read up a bit more. So we have this new support as well inside of GitHub Wikis! (Relatively new.)

You can also do something like this:

[[ Link text | page_title#header_title ]]

This might work a lot better for you! TIL because of this answer here. You can see me do this with the Prerequisite link and you can see my other links work the other way. Time for me to do some updates!

EDIT 1: Still useful but definitely NOT THE ONLY WAY.

So I answered a question about this before, you should avoid absolute links on GitHub (i.e. https://github.com/user/repo_name/...)

However, a good way (and kind of the only way inside of Wikis EDIT 1: TOTALLY NOT TRUE TO BEING THE ONLY WAY) of doing what you need can be seen like this:

[Header link](/user/repository_name/wiki/page_name#title).

This is kind of the linking unfortunately that the Wiki would support. This will change your directory page based off of GitHub. You can see that it would be

https://github.com/(the linkage you want to hit)

I have actually began doing something like this in a Wiki I work on here. Inside of my Sidebar, you can see I have a Getting Started Page, and then a subsection into it is a Prerequisite heading and it will properly lead people to where they need to go. You would be able to perform this same thing on any page. It is a tad verbose, but worth it as you can easily change things around if need be. This is also case-sensitive since it will change their location so be sure that in your linkage, the page is the proper case and your heading is all lowercase.

Hope this helps!

Upvotes: 8

ken
ken

Reputation: 14515

markdown generate slug for the heading and convert it to id, example

# [ topic ][ color ]

will be converted to

<h1 id="topic--color" data-line="643" class="code-line">[ topic ][ color ]</h1>

Thus, to link it you can write it as [color](#topic--color).

If the destination anchor is on another page (assume filename css.md) with path relative to current markdown page, then you can write it as [color](css.md#topic--color)

Attach the slugify function from vscode 

// excerpt from https://github.com/yzhang-gh/vscode-markdown/blob/908d7ba5465a203e4299f346c179211d992ef468/src/util/slugify.ts

const str = '# [ topic ][ color ]';

const slug = encodeURI(
            str.trim()
                .replace(/\s+/g, "-") // Replace whitespace with -
                .replace(/[\]\[\!\'\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~\`。，、；：？！…—·ˉ¨‘’“”々～‖∶＂＇｀｜〃〔〕〈〉《》「」『』．〖〗【】（）［］｛｝]/g, "") // Remove known punctuators
                .replace(/^\-+/, "") // Remove leading -
                .replace(/\-+$/, "") // Remove trailing -
        );
        
 console.log(slug) // "topic--color"

Upvotes: 0

Zuha Karim
Zuha Karim

Reputation: 279

You can link to the header by simply assigning an id to header. e.g you've "Extension" header in a page called Abc. # <a id="extension"></a> Extensions
You have another page "Call center" and you want to go to extension in abc , you can use reference linking of markdown i.e "The [extensions][1] are handled by agents" [1]: url-of-abc/#extension

Upvotes: 4

Neil Anuskiewicz
Neil Anuskiewicz

Reputation: 498

I tested Maxwell's "good way" to link to the header of another page in Github in Edit 1 on and it works perfectly.

#[crux-ports Installation](/user/crux-ports/blob/master/README.md#installation)

Upvotes: 0

Related Questions