marked icon indicating copy to clipboard operation
marked copied to clipboard

Display Github permalink to a code snippet

Open StrongerXi opened this issue 9 months ago • 7 comments

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.

StrongerXi avatar Apr 27 '24 19:04 StrongerXi

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

UziTech avatar Apr 27 '24 20:04 UziTech

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

StrongerXi avatar Apr 27 '24 20:04 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...

StrongerXi avatar Apr 27 '24 23:04 StrongerXi

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

UziTech avatar Apr 27 '24 23:04 UziTech

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 avatar Apr 28 '24 19:04 StrongerXi

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

StrongerXi avatar Apr 29 '24 07:04 StrongerXi

Awesome! :100:

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

UziTech avatar May 01 '24 04:05 UziTech