Is there a way to embed raw github url in hugo?

[gitorko]

I see there is an example to include a gist url but can i embed a raw github url which has code that i want to show in the blog?

[idarek]

You mean embed RAW code from gist?

You can look into do through iframe.

Other way is to pull at build time, but this will not update if there is a change until next build.

[gitorko]

gist is more like clipboard so i dont want to create it each time i commit something to github. I want the github code to be directly embedded in hugo site.
In hexo there was a plugin ghcode

GitHub - nkmk/hexo-tag-github-code

Is there something similar in hugo?

I am trying to create a shortcode but dont know where the response needs to be written. The hexo plugin seem to be create this as a table on generate

{{ $repo := .Get 0 }}
{{ $file := .Get 1 }}

[gitorko]

Adding this to shortcodes under layout, fetches the file but formatting is failing.

{{ $resp := getJSON "https://api.github.com/repos/FILENAME}}
{{ $resp.content | base64Decode | markdownify }}

[gitorko]

Similar problem as

Remote .md File Render

I store all my doc files on github in markdown format. How can I read these files and display them on my page in Hugo? For example, someone goes to docs/getting-started and it will know to pull the getting-started.md file from the URL that relates to said file on github.

[gitorko]

creating a ghcode.html in shortcodes with this works to some extent. It fetches the file but there is no syntax highlighting.

{{ $file := .Get 0 }}
{{ $result := resources.GetRemote $file }}

{{ $result.Content }}

[jmooring]

Here’s an example of retrieving some source code. The lexer for syntax highlighting is determined by the file extension.

{{ $u := "https://raw.githubusercontent.com/gohugoio/hugo/master/commands/env.go" }}
{{ with resources.GetRemote $u }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ $lang := path.Ext $u | strings.TrimPrefix "." }}
    {{ highlight .Content $lang }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource." }}
{{ end }}

If you are retrieving markdown and wish to render rather than highlight:

{{ $u := "https://raw.githubusercontent.com/gohugoio/hugo/master/README.md" }}
{{ with resources.GetRemote $u }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ .Content | $.Page.RenderString }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource." }}
{{ end }}

[gitorko]

Thanks. Highlighting worked.

It only works if i put this around the pre tag. Without the pre tag it is messed up.
Also there seems to be lot of space at the beginning and end of the snippet that comes by using highlight. The raw file doesnt have this spaces at beginning or end.

The one in gist looks cleaner as compared to the other code block embedded from raw github.

<pre>
{{ $file := .Get 0 }}
{{ $u := $file }}
{{ with resources.GetRemote $file }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ $lang := path.Ext $u | strings.TrimPrefix "." }}
    {{ highlight .Content $lang }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource." }}
{{ end }}
</pre>

[jmooring]

Please provide the remote URL.

[gitorko]

https://raw.githubusercontent.com/gitorko/project92/main/src/main/java/com/demo/project92/controller/HomeController.java

[jmooring]

I am unable to reproduce the problem, and it is not necessary to wrap the output in a <pre> element. Try it:

git clone --single-branch -b hugo-forum-topic-39957 https://github.com/jmooring/hugo-testing hugo-forum-topic-39957
cd hugo-forum-topic-39957
hugo server

If you need additional assistance, please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[gitorko]

Ya i see that its working fine in the repo you gave. Let me try figure out what the issue is. Could be css or some theme related issue.

My repo where the issue occurs

GitHub - gitorko/quickstart

Based on theme

Clarity

To Run:
git submodule update --init --recursive
hugo server

[jmooring]

You’re calling the shortcode like this:

{{% ghcode "https://foo" %}}

Do this instead:

{{< ghcode "https://foo" >}}

And remove the wrapping <pre> element from your shortcode.

Also note that this theme uses highlight.js for layout and styling.

[gitorko]

Thank you. It works now.

In case it helps anyone:

Create ghcode.html under layouts->shortcodes

{{ $file := .Get 0 }}
{{ with resources.GetRemote $file }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    {{ $lang := path.Ext $file | strings.TrimPrefix "." }}
    {{ highlight .Content $lang }}
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource." }}
{{ end }}

In the .md file pass the github raw url

{{< ghcode "https://raw.githubusercontent.com/.." >}}

For typescript file types it was not detecting the type after adding the below to config.toml file, ts files also work.

[mediaTypes."application/javascript"]
suffixes = ["ts","js","jsm","mjs"]