Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to disable the automatic linking of images in github markdown rendering?

When github.com renders an image in a readme.md, it automatically links the image in an a tag.

Using either

![][http://example.com/path/image] 

or

<img src="http://example.com/path/image" /> 

The actual rendered content will appear as

<a href="https://camo.githubusercontent.com/8a545f12e16ff12fd...." target="_blank"><img src="https://camo.githubusercontent.com/8a545f12e16ff12f..." alt="" data-canonical-src="http://example.com/path/image" style="max-width:100%;"></a> 

I understand the github image caching (on camo.githubusercontent.com), and that's fine, but I don't want the a tag to wrap my image.

I'm not sure if this is part of the github flavored automatic URL linking, or something specific images.

I am able to provide my own link (using my own a tag), but what I really want is no link, no a tag.

Is this possible?

thanks!

like image 702
ogrodnek Avatar asked Nov 16 '16 06:11

ogrodnek


People also ask

How does GitHub render markdown?

GitHub uses its own Markdown processor; GitHub Pages uses jekyll-commonmark. This means your README.md file will look different on GitHub's website than on your GitHub Pages website. For example, emoji are rendered on GitHub's website, but not on websites generated using GitHub Pages.

How do I add an image to a GitHub Readdown markdown?

Just add an <img> tag to your README.md with relative src to your repository. If you're not using relative src, make sure the server supports CORS.

How do I add a link in GitHub markdown?

There are two ways to create links. Or leave it empty and use the link text itself. URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).


2 Answers

You can wrap the image in a link that points to #:

[![](http://example.com/path/image)](#)  <a href="#"><img src="http://example.com/path/image" /></a> 

It will still be clickable, but won't open a new page, at least.

like image 70
Tamás Sengel Avatar answered Sep 18 '22 18:09

Tamás Sengel


Pass linkImagesToOriginal: false to gatsby-remark-images should be able to resolve this issue.

{  resolve: 'gatsby-remark-images',  options: {    linkImagesToOriginal: false,  }, }
like image 28
Auguest G. Avatar answered Sep 18 '22 18:09

Auguest G.