Embedding Gitea source in external pages?

Install/Maintain/Configure

datenimperator October 31, 2021, 4:35pm 1

I’m running Gitea to host my git repos. Many thanks for that, OSS community!

On my blog, I’d like to discuss some code that is stored (publicly) on Gitea. Can anybody think of a way to embed that file directly from git onto my webpage? Like, adding some JS to my page, which would in turn grab that piece of code and render it just like the Gitea page itself? Like, gists?

<script src="https://gist.github.com/datenimperator/5fe86f6a318b7b27a0a934f72af3340d.js"></script>

My blog is all static pages, generated by Jekyll. So a dynamic solution incorporating server-side functionality is out of scope. Regards

Christian

1 Like

lunny November 4, 2021, 12:57pm 2

I think you can do that to link to a raw link of a file. i.e. https://gitea.com/gitea/tea/raw/branch/master/demo.gif

datenimperator November 4, 2021, 3:14pm 3

Thx. That’d not give me the nice visual representation of the code editor embedded in Gitea. Eg no line numbers, syntax coloring or else. I see Gitea itself is using the Monaco editor library, probably I’ll build something around that, that’ll pull source from Gitea using the raw URL that you’ve mentioned.

lunny November 5, 2021, 11:57am 4

Yeah. It’s better for Gitea to have that feature but unfortunately there is not. But I think it’s not difficult for you to find a javascript code highlight plugin to do that.

datenimperator February 2, 2022, 3:18pm 5

To answer my own question: I created some Javascript along with a liitle bit of Jekyll integration to do exactly that.

{% gitea https://some.url/path/file.js %}

will be visualized as a prism-enabled syntax highlighted block of source code, retrieved directly from Gitea. Gitea Integration mit Code Highlighting · 17932348fa - software-berater.net - Gitea

I needed to get CORS header along with my Gitea response and had no luck doing so using the Gitea configuration. But I could add those headers using Traefik.

STaRDoGG February 7, 2022, 3:29am 6

It must not be on the todo list; I requested it 3 years ago and got crickets.

github.com/go-gitea/gitea

Feature request: Embeddable .js option

opened 10:07PM - 05 Sep 19 UTC

STaRDoGG

kind/enhancement reviewed/confirmed

I'd love to have the option to get an embeddable link to a file when viewing an…y specific file in a repo. **Example:** On GH you can create Gists, and once you do, it offers an option to copy an embeddable .js file that you can put on any other site. If you're not already familiar with it, it looks like this:  **Which gives you a script like:** `<script src="https://gist.github.com/STaRDoGG/70bc7807cfdb2a88a04dcad8474dbd07.js"></script>` And then once run on a site, shows you the code, all pretty and formatted, etc. It'd be awesome to be able to do the same thing with any file in a repo in Gitea as well, so we can embed code from our own repos into other sites. Perhaps just clone and modify the Gist .js file and modify it to work with Gitea?

2 Likes

Utopiah June 24, 2024, 7:47am 7

Well, I’d stil be interested. Found A custom template for Gitea to embed pages into tabs with an iframe. Requires the proper X-Frame-Options and Content-Security-Policy on the linked resource. The example below is how I use it for Drone. Install into data/gitea/templates/custom/extra_tabs.tmpl as described on https://docs.gitea.io/en-us/customizing-gitea/#customizing-gitea-pages · GitHub also but I find that documenting code from outside the repository, say a blog post, can help a lot.