yusanshi / emgithub Goto Github PK
View Code? Open in Web Editor NEWEmbed a file from GitHub repository just like GitHub Gist.
Home Page: https://emgithub.com
License: MIT License
Embed a file from GitHub repository just like GitHub Gist.
Home Page: https://emgithub.com
License: MIT License
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
.
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.
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.
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 :)
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?
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.
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! 🙏
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.
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
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
For example, support text display in Chinese, Japanese, or other languages
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?
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.
i need render single markdown file full page, can this tool do that ?
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
For example, if you check this link: 6ffceea
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 :)
In this part of the code:
Lines 340 to 342 in 684c444
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.
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.
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 ... }
.
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 🤔
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
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!
Would it be interesting to you/others to add little sharing shortcuts? Like maybe an icon to copy, or an icon to facilitate sharing?
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.