# How to add image for this type of markdown

**URL:** <https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326>\
**Category:** Help\
**Created:** [July 16, 2024, 3:47pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326 "2024-07-16T15:47:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![manzil-infinity180](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/manzil-infinity180/32/6008_2.png) [@manzil-infinity180](https://talk.jekyllrb.com/u/manzil-infinity180)\
**Post date:** [July 16, 2024, 3:47pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/1 "2024-07-16T15:47:49Z")

</div>

![Firebase](https://img.shields.io/badge/FireBase-059BE5?style=for-the-badge&logo=firebase)

i want to do this in jekyll

can we do it without using **img** tag

---

<div class="post-metadata">

**Author:** ![manzil-infinity180](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/manzil-infinity180/32/6008_2.png) [@manzil-infinity180](https://talk.jekyllrb.com/u/manzil-infinity180)\
**Post date:** [July 16, 2024, 3:48pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/2 "2024-07-16T15:48:20Z")

</div>

![Screenshot (25)](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/6/600d453c877b2aac899ffdb4b30ad15a5398e5c3.png)  
like that

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [July 16, 2024, 4:49pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/3 "2024-07-16T16:49:37Z")

</div>

Not sure I understand, but the example README you reference uses Markdown for the Firebase logo:

> <https://github.com/manzil-infinity180/manzil-infinity180/blob/b7d685b4a61fdd5bb9afe5510e859096a8ed284d/README.md?plain=1#L44>

---

<div class="post-metadata">

**Author:** ![manzil-infinity180](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/manzil-infinity180/32/6008_2.png) [@manzil-infinity180](https://talk.jekyllrb.com/u/manzil-infinity180)\
**Post date:** [July 16, 2024, 5:09pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/4 "2024-07-16T17:09:56Z")

</div>

If I want to use in jekyll and markdown project how can I use it …  
Any way without img html tag

---

<div class="post-metadata">

**Author:** ![panchtatvam](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/panchtatvam/32/5512_2.png) [@panchtatvam](https://talk.jekyllrb.com/u/panchtatvam)\
**Post date:** [July 17, 2024, 10:51am UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/5 "2024-07-17T10:51:59Z")

</div>

Markdown can’t create images. It only refers to them. The [logo you mentioned](https://img.shields.io/badge/FireBase-059BE5?style=for-the-badge&logo=firebase) is a full image with logo and text. You may create such an image and then refer it in markdown.

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [July 17, 2024, 12:45pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/6 "2024-07-17T12:45:12Z")

</div>

Possibly you are asking about embedding Markdown inside HTML? If you are using Jekyll’s default Markdown processors (Kramdown), then you can use the `markdown` attribute to allow mixed HTML and Markdown:

```markdown
<div markdown="1">

![Firebase]((https://img.shields.io/badge/...)

</div>

```

If you want to completely avoid the HTML `img` tag/element, you could inline the SVG badge. For example, the Firebase badge (without large raster icon for brevity):

```markdown
# A test SVG in Markdown

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="109" height="28" role="img" aria-label="FIREBASE">
<title>FIREBASE</title>
<g shape-rendering="crispEdges">
<rect width="109" height="28" fill="#059be5"/>
</g>
<!-- left out icon for brevety -->
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="100">
<text transform="scale(.1)" x="645" y="175" textLength="650" fill="#fff" font-weight="bold">FIREBASE</text>
</g>
</svg>

```

---

<div class="post-metadata">

**Author:** ![BillRaymond](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/billraymond/32/5963_2.png) [@BillRaymond](https://talk.jekyllrb.com/u/BillRaymond)\
**Post date:** [July 17, 2024, 10:02pm UTC](https://talk.jekyllrb.com/t/how-to-add-image-for-this-type-of-markdown/9326/7 "2024-07-17T22:02:05Z")

</div>

You are getting some good responses here, but I wonder if this is simpler than you might be thinking.

Jekyll supports markdown, so if the file ends in the extension `.md` or `.markdown`, type your code in that file just as you usually would, like this:

`./index.markdown`

```auto
![Firebase](https://img.shields.io/badge/FireBase-059BE5?style=for-the-badge&logo=firebase)

```

The result will display the following image (so long as the link you shared remains active, anyway 🙂

![Firebase](https://img.shields.io/badge/FireBase-059BE5?style=for-the-badge&logo=firebase)