Embed a file from Github repository just like Github Gist. Unlike other websites that do similar work, EmGithub.com is a static site hosted on Github Pages. Fetching target files and highlighting are done on your browser.
Related post: https://blog.yusanshi.com/2019-12-17-emgithub/
There are two ways to use the service.
Supposed you want to embed the file https://github.com/pytorch/pytorch/blob/master/torch/nn/cpp.py. The first way is to visit https://emgithub.com/ and paste the URL. The other is to simply add "em" before "github.com". For this cpp.py file, you edit URL into https://emgithub.com/pytorch/pytorch/blob/master/torch/nn/cpp.py, then press Enter.
Permanent links to a file or a code snippet are supported.
ProTip
- Use
#to slice code, use?ts=to specify TAB width. An example using both of them:?ts=2#L4-L12. - The outermost div has a class attribute
emgithub-container. Do any hacks you want.
- Support more styles
- Check input
- Show spinner while loading
- Add metadata
- Line count
- Remember options using localStorage
- Code slice
- Different styles in one page
PR is always welcomed.
You can modify the code and test it by launching an HTTP server in the project directory.
-
Launch an HTTP server.
git clone https://github.com/yusanshi/embed-like-gist cd embed-like-gist python -m http.server 8086 -
Make the changes.
-
To test the 404 page, visit http://localhost:8086/404.html.
Don't be confused by the "404". It is how the "adding em in address bar" works: after adding the "em", the HTTP server (provided by GitHub Pages) can't find the file so it renders
404.html. -
To test the real performance when the code is embedded, create a simple HTML file
test.htmlin the project root directory like this:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Test</title> </head> <body style="padding:5rem"> <h1>JavaScript, All options on</h1> <script src="http://localhost:8086/embed.js?target=https%3A%2F%2Fgithub.com%2Fyusanshi%2Fembed-like-gist%2Fblob%2Fmaster%2Fembed.js&style=github&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script> <br /> <h1>Plain text, All options off</h1> <script src="http://localhost:8086/embed.js?target=https%3A%2F%2Fgithub.com%2Fyusanshi%2Fembed-like-gist%2Fblob%2Fmaster%2FLICENSE&style=github"></script> <br /> <h1>Add more examples yourself...</h1> </body> </html>
Then visit http://localhost:8086/test.html.
You may want to create your own embed-like-gist for some reasons, like:
- To fit your personal needs.
- For security. Say if https://emgithub.com/ is hacked...
- For stability. There may be some breaking changes with https://emgithub.com/ (I will try to avoid this, but can't make a guarantee).
To do this, you should decide the server to use.
If you choose to use GitHub Pages just like https://emgithub.com/ does, you can fork the project and remove the CNAME file. Then go to Your repository - Settings - GitHub Pages to setup a custom domain or simply use username.github.io.
If you choose to use your own web server, such as Apache and Nginx, the most important thing to do is to configure the server to serve 404.html for a not-found request.
For example, here is a simple configuration without HTTPS for Nginx:
server {
listen 80;
listen [::]:80;
server_name your_domain.com;
root /var/www/project_directory;
location / {
try_files $uri /404.html;
}
}- Highlight.js - Javascript syntax highlighter;
- highlightjs-line-numbers.js - Highlight.js line numbers plugin;
- PostScribe - Asynchronously write javascript;
- Icons made by Vectors Market and Dave Gandy from www.flaticon.com;
- Loading animation by Loading.io;
- CSS style based on GitHub syntax theme generators;
- GitHub Corners.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent