How to add image for this type of markdown

Firebase

i want to do this in jekyll

can we do it without using img tag


like that

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

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

Markdown can’t create images. It only refers to them. The logo you mentioned is a full image with logo and text. You may create such an image and then refer it in markdown.

1 Like

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:

<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):

# 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>
1 Like

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

![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 :slight_smile:

Firebase