Embed a file from GitHub repository just like GitHub Gist.
Demo: https://yusanshi.com/posts/2019-12-17/emgithub/#%E6%B5%8B%E8%AF%95.
There are two ways to use the service:
- Go to https://emgithub.com/ and paste the URL.
- Open a file in GitHub and simply add "em" before "github.com" in the address bar.
ProTip
- Support permanent links to a file or a code snippet (use
#
to slice code). - Specify TAB width with
?ts=
. Note when used together with code slicing, you should combine them like this:?ts=2#L4-L12
. - Support Markdown (
*.md
) and Jupyter Notebook (*.ipynb
) rendering. - Support
<script>
and<iframe>
embedding. Generally the<script>
should be preferred for being more lightweight. But if your platform doesn't support<script>
embedding (the case with Obsidian), or the snippets look strange when embedded into the target web page (most likely the styles are overridden by the target page), you can try the<iframe>
embedding.
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/emgithub cd emgithub python -m http.server 8086
Make the changes.
Visit http://localhost:8086/404.html.
Don't be confused by the "404". It is how the "adding em in the address bar" works: after adding the "em", the HTTP server (provided by GitHub Pages) can't find the file so it renders
404.html
. Then in the 404 page, the target file is extracted from the URL.You may want to create your own emgithub 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/ (although I'm trying to avoid this, e.g., when there are major changes,
embed-v2.js
,embed-v3.js
... are used. In this way, the former embeddings are not affected).
To do this, you can use either GitHub Pages or your own web server.
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 toYour repository - Settings - GitHub Pages
to setup a custom domain or simply useusername.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.
- marked - Markdown parser.
- github-markdown-css - GitHub Markdown style.
- notebookjs - Jupyter/IPython notebooks render.
- Loading.io - Loading animation.
- GitHub Corners.
- Icons made by Vectors Market and Dave Gandy from www.flaticon.com.
emgithub's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.