A library that will allow me to render Github permalinks

Question

Github has a fantastic feature where if you copy a github permalink into an issue or pull request, it shows up as a preview.

For example the link:

https://github.com/dwjohnston/blacksheepcode/blob/e251894598953e9adcb0a36c02905d09daf37a35/package.json#L3-L8

Shows as:

I have an MDX based blog, and I'd like to be able to display similar code blocks in posts.

In order of preference, what I'd like is:

1. Some kind of MDX plugin that parses the link and replaces it with the preview panel.
2. Some kind of React component that accepts the link as a prop and displays a preview panel.
3. Some kind of vanilla javascript function that imperatively inserts the panel.

Does anyone know of such a tool/library?

Answer 1

I ended up creating a library that does this.

https://www.npmjs.com/package/react-github-permalink