Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make relative link to image in a markdown file in a gist?

People also ask

Does gist support markdown?

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.

How do I embed an image in Github markdown?

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

Relative path?

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.

  • Currently neither form returns a redirect, nor serves a rel=canonical link. I wouldn't bet on Github to never change this!
  • All internal gist links (e.g. from user's page https://gist.github.com/cben/) omit the trailing slash :-(
  • Gists in Google search results omit the trailing slash :-(

(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.)

Using a proxy?

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:

  • http://rawgit.com/cben/46d9536baacb7c5d196c/raw/index.html
  • http://rawgit.com/cben/46d9536baacb7c5d196c/raw/
  • http://bl.ocks.org/cben/raw/46d9536baacb7c5d196c
  • http://bl.ocks.org/cben/46d9536baacb7c5d196c

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