Display Github permalink to a code snippet

[StrongerXi]

Describe the feature

When someone includes a permalink to a GitHub code snippet in their markdown file, marked will generate HTML that displays that code snippet in a style similar to what GitHub currently does.

Why is this feature necessary?

This significantly enhances reader's experience when the markdown file refers to some open-source code snippet.

Describe alternatives you've considered

The only other option I can think of is to host the markdown via GitHub so we get this feature for free. But I'd like to host the markdown as a blog post on my personal website.

I also found this project which displays the permalink via a React Component, but it requires using React and breaking up the markdown source.

[UziTech]

If you want to create an extension we can add it to our known extensions.

[StrongerXi]

Cool. I'm somewhat unfamiliar with the HTML space, but happy to give it a shot.

[StrongerXi]

Got it to work but now it feels like a bad idea, since it involves querying the GitHub API for file content every time you parse a permalink, which requires an access token, and there's a rate limit. Maybe it's better to just show the link and copy over the source code...

[UziTech]

Seems like this is a limitation of react-github-permalink as well.

[StrongerXi]

Seems like this is a limitation of react-github-permalink as well.

Yeah exactly. I'm not a web-dev person so I realized I was making a lot of bad assumptions lol. Now I think I'll just use the extension to statically generate the HTML from markdown, and serve that for my purposes. I'm also using a forked version of zero-md since there are some style things I want from that, but the extension should be usable for anyone that wants to go from markdown to HTML, with embedded GH permalink displayed like how GH displays them in threads.

I'll publish the extension when it's polished, in case anyone ever finds it helpful.

[StrongerXi]

Here it is: https://github.com/StrongerXi/marked-gh-permalink

[UziTech]

Awesome! 💯

If you want to you can create a PR to add the extension to known extensions in https://github.com/markedjs/marked/blob/master/docs/USING_ADVANCED.md