Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to add border to image in GitHub markdown?

I need to add border to the image in GitHub README.md file. This is how image should be embeded:

![GitHub Logo](/images/logo.png) 

I have tried to wrap image with the table:

|--------------------------------| |![GitHub Logo](/images/logo.png)| 

but it is not possible to create table without header.

I have also tried to include image as html tag:

<img src="/images/logo.png" style="border: 1px solid black" /> 

but without success. Is there any way how to do this?

like image 967
madox2 Avatar asked May 20 '16 14:05

madox2


People also ask

How do I mark a PNG in markdown?

Images can be added to any markdown page using the following markdown syntax: ![ alt text for screen readers](/path/to/image. png "Text to show on mouseover") .

Which tag is used to add borders image?

The <img> border attribute is used to specify the border width around the image. The default value of <img> border attribute is 0.

How do I insert an image in GitHub Markdown?

According to the GitHub documentation, the Markdown syntax for inserting an image is: ! [GitHub Logo] (/images/logo.png) Format: ! [Alt Text] (url)

Can Python-Markdown output border-based HTML?

Python-Markdown simply outputs standard HTML for tables. As explained in the Markdown syntax rules "HTML is a publishing format; Markdown is a writing format." Whether borders are displayed and/or the style of those borders are publishing matters and outside the scope of Markdown. However, basic CSS rules for styling the HTML will work fine.

Can I use Markdown to style borders in HTML?

As explained in the Markdown syntax rules "HTML is a publishing format; Markdown is a writing format." Whether borders are displayed and/or the style of those borders are publishing matters and outside the scope of Markdown. However, basic CSS rules for styling the HTML will work fine.

How can I edit the diagrams embedded in GitHub Markdown pages?

Using the file edit-diagram.html, available from our Github repository, you can enable developers with appropriate access to edit the diagrams embedded in Github markdown pages. The edit-diagram.html file interfaces with Github and uses diagrams.net in embed mode allowing you to edit and save diagrams stored in a repository.


2 Answers

It's hacky and not always pretty, but surround the image with a <kbd> tag.

Before

<img src="https://i.stack.imgur.com/CtiyS.png"> 

After

<kbd>   <img src="https://i.stack.imgur.com/CtiyS.png"> </kbd> 

And it renders like this:


Surrounding the markdown image syntax might not work for some markdown implementations. If the following does not work

<kbd>![alt-text](https://example.com/image.png)</kbd> 

Try embedding the image as an HTML <img> tag instead

<kbd><img src="https://example.com/image.png" /></kbd> 
like image 105
kdbanman Avatar answered Sep 29 '22 07:09

kdbanman


Here on StackExchange sites, I like to use the "quote" markup > for this purpose.

For example:

> [![screenshot][1]][1]    [1]: https://i.stack.imgur.com/CtiyS.png 

renders like this:

screenshot

like image 32
daveloyall Avatar answered Sep 29 '22 06:09

daveloyall