yusanshi / emgithub Goto Github PK

Is there a way of embedding code using some kind of markers instead of line numbers?

Let's say I have this file:

import sth
import sth not important

fun myFun() {
 stuff here
 stuff here
}

I've embedded the myFun() part: L4-L7

fun myFun() {
 stuff here
 stuff here
}

Afterward I've noticed one of the imports is not important, so I delete it from the code base,

import sth

fun myFun() {
 stuff here
 stuff here
}

but forget to update the embedded line numbers, so the embedded part looks like this:

 stuff here
 stuff here
}

I'm aware that instead of pointing to a branch, I can point to a commit/permalink, which won't change. But this is also a disadvantage, since the code samples would show something outdated.

I was thinking if there is a way to embed code using some kind of markers. I've tried googling it, but no luck so far. Maybe you could point me to something useful.

Hi, there is a mystery somewhere:

When previewing a simple HTML file https://emgithub.com/pajasevi/CSSnowflakes/blob/master/snippet.html everything looks fine,

But when I try to embed it, I lose all indentation. There is nothing but the <script>, no CSS, etc.

Do you reproduce?

I recently stumbled over this project when looking for ways to embed my notebooks directly from Github, instead of having to additionally save them as gists. Your project looks like the perfect solution for this (so thank you for that).

However, for my application, there is still one decisive problem: I usually want to embed Jupyter Notebooks on my webpage. On GitHub and GitHub gists, Jupyter Notebooks are nicely rendered into HTML, which is perfect for my applications. However, when I use emgithub.com, Jupyter notebooks will be displayed as their raw source code.

I'm not sure if this will blow the scope of your project, but I was really wondering if there are ways for me to get the rendered code instead, or whether you plan to integrate a "Jupyter Notebook" option which would render Jupyter Notebooks in the same way gists do...

Thank you very much for this great tool! 🙏

Currently emgithub only shows the file name in the folder, which does not indicate the path structure. An option to show the full path of the file in the repository would be awesome.

e.g. https://github.com/user/repository/blob/branch/src/hello.cpp#L2-L6 -> src/hello.cpp instead of hello.cpp

The choice of different colour schemes only applies to raw code, the markdown colour scheme is hardcoded to https://cdn.jsdelivr.net/gh/sindresorhus/[email protected]/github-markdown-light.min.css. There exists a dark mode equivalent https://cdn.jsdelivr.net/gh/sindresorhus/[email protected]/github-markdown-dark.min.css and it would be nice to have the choice to use that one instead.

I noticed that code coloring makes strange results especially when processing multi-line python code (python code line that goes over several physical lines).
example:
trying to embed this code:
https://github.com/horstjens/ThePythonGameBook/blob/master/python/tictactoe/002b_crude_display.py

Possibly same problem: a one-line python code looses it correct coloring. Maybe because it included a "\n" ?

I made a fork and set up github pages. It's <...>.github.io/emgithub, but serviceProvider is <...>.github.io.

In this part of the code:

We check if the global variable hljs is present. If not, we load the script. But it seems that if we load multiple code snippets fast enough, hljs will be undefined while they are being loaded, causing multiple <script> tags to appear to load highlightjs.

It can be seen on my website:

This issue may or may not appear depending on the internet connectivity. But it is there. To mitigate this issue, I suggest that we check the existence of the script tag loading highlighjs library instead of checking hljs variable.

Hey yusnanshi,

I would like to request to add Arduino dark theme based on One Dark Pro – https://github.com/konrad91/OneDarkArduino.
It's really nice theme for highlighting Arduino code.

Here is sample image of code highlighted by that theme:

Hi, it's me again.

As mentioned in the title, FIRST, I found that GitHub uses 4 spaces as TAB indentation width, but highlight.js use 8 spaces as default. See the following two pictures for details.

The display style in GitHub:

The display style in EmGitHub:

I wonder if we can make them consistently, in order to avoid wasting space.

SECONDLY, I found that Gist's CSS style uses a font size of 12px gist-meta: { font: 12px ... }, and EmGitHub uses a font size of 0.8rem file-meta:{ font: 0.8rem ... }.

https://github.com/yusanshi/embed-like-gist/blob/08eaecb705659cc9253a9688461987b20cdad8f7/embed.js#L32-L37

In my user experience, on a page that contains both Gist and EmGitHub, it looks a little strange that the font size is different, but it’s okay.

FINALLY, I wonder if we can use the params.toString() value as the id attribute of the outermost div and change the class attribute to a common class name. Because I hope I can modify some styles of EmGitHub externally by matching the class name, or is there any other way to implement this 🤔

https://github.com/yusanshi/embed-like-gist/blob/08eaecb705659cc9253a9688461987b20cdad8f7/embed.js#L5

https://github.com/yusanshi/embed-like-gist/blob/08eaecb705659cc9253a9688461987b20cdad8f7/embed.js#L28

I have implemented a solution to embed only certain lines. It introduces two new arguments. See myroslambda@890c829

The only thing that does not work is line numbering. I know where to put it, but the PR in highlighjs-line-numbers has not been accepted yet: wcoder/highlightjs-line-numbers.js#65

Would it make sense to add this to the project, and maybe to ping https://github.com/wcoder/ and ask if that PR can be accepted?

Hey there,

I found emgithub.com to be extremely useful to my workflow, but I cannot embed my code snippets (from my repo) on medium.com. This is maybe because they use "embed.ly" to handle all the interactive embeddings.

@yusanshi , Would you please consider listing "emgithub.com" on Embedly? It would help a LOT of people.

Thanks in advance!

The server is responding the page as 404

because you are serving it from 404.html of GitHub Pages and I know it doesn't create a big impact on this type of website but for making a content site like blogging website google doesn't index the 404 pages and that's why your website https://emgithub.com/ is not on google search results.

Solution Approach

• Either set the 404 response to 200 (but how ?)
• Or Use another approach to built custom and clean URLs without having it....

Thanks a ton for this amazing tool. 1 feature I feel would be a cherry on top, would be to have support for embedding commit diffs.

Feature requests

• Support for embedding commit diffs
• Support for embedding specific files from a commit with diff

For example, if you check this link: 6ffceea

It displays as displayed in the following image.

For some reasons, raw.githubusercontent.com is not available in Mainland China. However, I think we can use jsDelivr to get the GitHub raw files. jsDelivr works well in China as it is described in the document, and it can speed up obtaining files too.

I have tested this way and it is feasible, I can make a pull request if you also think it is a good idea.

By the way, I found a problem. If we get the embed.js through jsDelivr(i.e. use https://cdn.jsdelivr.net/gh/yusanshi/embed-like-gist@master/embed.js), then ${serviceProvider} will become cdn.jsdelivr.net, which is kind of strange. I think it can be written as emgithub.com directly :)

I updated a file:
https://github.com/mvodep/Playground/blob/main/Hibernate%20History/schema.sql

When i insert the URL, the old version is shown:
<script src="https://emgithub.com/embed.js?target=https%3A%2F%2Fgithub.com%2Fmvodep%2FPlayground%2Fblob%2Fmain%2FHibernate%2520History%2Fschema.sql&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on&fetchFromJsDelivr=on"></script>

Line 7 is changed from SERIAL to INTEGER PRIMARY KEY GENERATED ALWAYS AS IDENTITY for example

How long is the file cached?

For example, support text display in Chinese, Japanese, or other languages

i need render single markdown file full page, can this tool do that ?

Hey,

I just updated the contents of a file, but the content of the embedded code didn’t change. Is there are workaround for that?

Really nice tool btw! Appreciate it :)

This is probably too broad for a feature request, but I would like to use this without needing JavaScript enabled on my browser.

I'm planning on adding it to a page that uses Nuxt, so I imagine this being a library with a function or a Vue component you can import and place on your view, and when generating the static site it builds the HTML like it would on a browser.

But I can see that might mean making a entirely different repo, and then maybe using that as a dependency of the emgithub page.

Nice work! Using in the classroom and it works great.

I do not understand how to get the <script> version to render on a page? The page is always blank but viewing source I see the script like:

<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fyusanshi%2Femgithub%2Fblob%2Fmaster%2Fembed.js&style=night-owl&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on"></script>

I assume the script should render but perhaps I am misunderstanding.

i embed python code into a html website using https://emgithub.com/pytorch/pytorch/blob/master/torch/nn/cpp.py

I noticed that below the last code line but above the lower border

of the code container seem to be 2 empty lines, how can i disable them?

After forking the repository and removing the CNAME file, the code snippet fails to load - it just spins. I have verified that the embed does render correctly on emgithub.com.

See https://ideon-technologies.github.io/embed-like-gist/ and testing with https://github.com/yusanshi/embed-like-gist/blob/master/404.html

I'm trying to embed my own code in a website:

https://github.com/InCogNiTo124/avgen/blob/master/avgen.py

pasting the generated script:

<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2FInCogNiTo124%2Favgen%2Fblob%2Fmaster%2Favgen.py&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on"></script>

generates an error from the title.

Would it be interesting to you/others to add little sharing shortcuts? Like maybe an icon to copy, or an icon to facilitate sharing?

If I try to generate the code with a permalink that contains one line only, it shows the file from that line up to the end, while we only would show the single line.