Most of you probably know and use Github Gists for sharing Code snippets. But did you know that Gists also support Markdown? Using Markdown makes it easy to create much richer code shareable code and even allows for an easy way to create self-contained Web content.
Drag and drop the image into the Comment field. The image will start uploading to Github servers. 4) Save the markdown file. And you'll see the image placed inline in the markdown file.
As of now, relative image links are working for me, in both a repository and a wiki. I'm using syntax like this:
![Kiku](images/Kiku.jpg)
Here's an example:
https://github.com/mark-anders/relative-image-url
According to http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html, the problem in using https://gist.github.com/user/605560c2961cb3025038/raw/b75d2...6e8/img.png
is that the b75d2...6e8
part varies per file (a quick experimentation confirms it is the git blob id). However you can drop that part resulting in a URL pointing to the latest version:
https://gist.github.com/user/605560c2961cb3025038/raw/img.png
or to take a working example:
https://gist.githubusercontent.com/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png
This also works as relative path raw/dodgetocat_v2.png
!
However (as of late 2017) github can render the same gist from 2 URLs:
When viewed from https://gist.github.com/cben/46d9536baacb7c5d196c/ (with trailing slash), the relative path is appended, resolves to https://gist.github.com/cben/46d9536baacb7c5d196c/raw/dodgetocat_v2.png — works :-)
When viewed from https://gist.github.com/cben/46d9536baacb7c5d196c (no trailing slash), the relative path replaces the last part of the URL, resolves to https://gist.github.com/cben/raw/dodgetocat_v2.png — broken :-(
[UPDATED Dec 2017. Previous problems of raw files served as Content-Type: application/octet-stream
and rewriting src
attributes of images to camo.githubusercontent.com
no longer happen, at least not for images from same gist.]
Alas, we can't just use the first URL and trust it to always work.
(You could use relative path 46d9536baacb7c5d196c/raw/dodgetocat_v2.png
that would only work without trailing slash, but that's also questionable idea, and less worth it — not really more flexible than full URL.)
Both can be worked around with a proxy fixing the Content-Type, e.g. Rawgit or Bl.ocks.org (not by Github, don't abuse them). Unfortunately Rawgit doesn't render Markdown, only serves files as-is, and Bl.ocks.org does render markdown but the URL structure is such that relative links won't work. This means you can either reference full external URL in Markdown, or relative in HTML :-(
See https://gist.github.com/cben/46d9536baacb7c5d196c/ forked off your gist, and its index.html viewed via:
Yes, the relative link is working for me. I am using pancake.io to host my pages. http://pancake.io/2c8aa8/topics/cpp/cpp.md
The images on that page are in the cpp
folder.
The markdown code used for the first image is
![C++ Var Types](basic_cpp_var_types.png)
The markdown code (actually html) used for the second image is
<div style='float: center'>
<img style='width: 600px' src="prefixpostfixincrement.png"></img>
</div>
NOTE: I missed the gist part. Try the html way if gist doesn't support the markdown relative image path syntax.
tested just now... i was unable to use relative urls on the github wiki.
i had to add the image to the wiki repo, then browser the repo and have github show it to me (so i could grab the url). then use the full url in the markdown. but luckily, the urls are simple to predict: https://github.com/*username*/*reponame*/wiki/*imagename.png*
i submitted this isse to the github support.
No, the relative URL to an image from markdown doesn’t work, so you’ll have to stick with the long, static URL:
https://gist.github.com/mattborn/c346c8689a5eaf86e823
However, relative URLs to some files work:
http://bl.ocks.org/mattborn/c346c8689a5eaf86e823
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With