How to add a image with links in markdown?

Help
1

flipkart

When user click in this image it has to redirect to the the site. I know how to do it in HTML i just don’t know it in markdown

2

In HTML, you add a tag around img.

Same for markdown

Image:
![Alt text for broken image link](assets/logo.png)

Link:
[Alt text for broken link](httsp://example.com)

Image with link:
[![Alt text for broken image link](assets/logo.png)](https://example.com)

Note the link on the outside doesn’t have alt text anymore but the link still wraps the image.

Yes it is hard to read and edit but you get used to it as a pattern in markdown

It is not valid to break it over lines, but to demonstrate the syntax I’ll do it

[
  ![Alt text for broken image link](assets/logo.png)
](https://example.com)
1 Like
3

wabt opening it in new tab?

4

I don’t think markdown supports it.

HTML

<a href="#" target="_blank"></a>

But you can mix markdown and HTML if you are careful to include empty lines as here.

<a href="https://example.com" target="_blank">

![My image](logo.png)

</a>
1 Like
5

Oh wait looking at my notes, if you use Kramdown (default in Jekyll) you can do this.

[Alt text](https://example.com){:target="_blank"}
1 Like
6

Found one:
FLipkart{:target="_blank"}
Works for Jekyll only but in others, it leaves {:target="_blank"} part as it is.

Was trying to be in the good books of Commonmark as well as kramdown…I think there is a way but can seem to figure out. I do have the markdown docs of github. Could you help me understand?

Link:

7

Can you indent your code by 4 spaces or put it inside code fences? As I can’t read your last comment

```
Code
```
8

Yes that is Kramdown ie Jekyll. So you need my HTML/markdown mix if you want to do it in GitHub markdown docs for example

9 
Found one:
[![FLipkart](/assets/img/buttons/flipkart.png)](https://www.flipkart.com/){:target="_blank"}
Works for Jekyll only but in others, it leaves {:target="_blank"} part as it is.

Was trying to be in the good books of Commonmark as well as kramdown...I think there is a way but can seem to figure out. I do have the markdown docs of github. Could you help me understand?

Link:
https://github.github.com/gfm/#links
10

Thanks. I meant just for the image bit not the whole answer but it fine.

GHF markdown doesn’t support target by searching in the doc.

1 Like
11

Oh okay…which one do you use? I wanted to use the same parser for my IDE too so that i don’t have inconsistencies.

12

CommonMark, Kramdown and GHFM are 3 kinds of markdown.

Jekyll config uses markdown: kramdown as the default. I leave it out my config.
I’ve been using Jekyll for years and never needed to switch to another format.

I don’t know if you can set the in your IDE and how much benefit you’ll get.

I use VS Code with a Liquid extension installed. And I set up per project for .md and .html files to use liquid highlighting. Haven’t bothered to check if it handles flavors.

Regarding the target stuff, that is very specific to Kramdown. I would not count on your IDE to render it in preview pane but as long as you can see the source code in your IDE you’ll be fine. Also looking on GitHub itself won’t help but viewing a Jekyll site will be fine.

Some flavors of markdown will require white space around say bullets or headings and others won’t care. In particular I had issues using either Sublime or maybe PyCharm, where my markdown preview looked good in the sidebar but rendered funny in GitHub. I adjusted my markdown code habits to accommodate for this by writing the most compatible code and checking results on GitHub and IDE.