How to embed Github Gists and GitLab codes snippets <script> tag in Next.js application and display them?
As developer, you know Git Gists and Gitlab codes snippets. Basically it is a tool or repository for developer instantly share code, notes, and snippets.
You can share your codes either via URL or embed script tag like below.
https://gitlab.com/annacoding2020/codes-snippet/snippets/1930724
Embed Script: <script src="https://gitlab.com/annacoding2020/codes-snippet/snippets/1930724.js"></script>
If you are using Medium Editor now, you can paste Gitlab gist url to editor and Medium Editor will automatically parse it and display codes in editor as below. It is a pretty good user experience to share codes or snippets.
This tutorial will show you how to implement a same function with Next.js built-in server.
🤔The issues we have
- You cannot directly add embed script tag to React codes. It loads the script, but never show codes.
- Github Gist Url supports query by JSONP. You can query code snippet via JSONP. For example, react-gist library is done this way. https://github.com/tleunen/react-gist🔗But Gitlab codes snippets do not support JSONP so that you cannot use this way.
- To display Gitlab codes snippets, you still can query script url to get the contents in script. Gitlab uses document.write in their snippets, that’s why the snippets are not working directly in SPAs. Fetching their snippets directly are blocked by CORS. react-gistlab( https://github.com/teimurjan/react-gistlab) uses a disable cors proxy for fetching the snippets. I tested and it does not work for me.
🤔How to implement this function in React SPA application? Since annacoding.com is using Gitlab codes snippets and I will use Gitlab codes snippets as an example in this tutorial.
💡Solution in a nutshell
We will query script in server side via Next.js page. Display returned codes snippets html in iframe tag.
Check the solution in below article link. It is integrated with gitlab codes snippet.
