Is it possible to add border to image in GitHub markdown?
HtmlGithubMarkdownHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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:
https://i.stack.imgur.com/CtiyS.png">
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>
Solution 2 - Html
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:
Solution 3 - Html
You can use <table>
tag to create tables without header.
<table><tr><td>
<img src="/images/logo.png" />
</td></tr></table>
Solution 4 - Html
The way I do this on Gitlab is using a table like so:
| ![Alt name of image](/path-to-image.png) |
| ------ |
Solution 5 - Html
Another way is to use table's first cell for it.
Code:
|![pictureAliasName](pathOfPicture/pictureName.png)|
-
The -
character is important in the code.
You can see the result here .
Solution 6 - Html
I often do like this at GitHub comment. Maybe some line breaks are needed.
# Added at 2021/05/24
// No end tag
<kbd> ![image_alt](image_path)
# Added at 2020/09/14
| ![...)
|-
label_text
|-
![...)
| ![...a) | ![...b)| ![...c)
|-|-|-
# Before / After
Before | After
-|-
![...a) | ![...b)
# with Background color
||
|-
||
![...)
Solution 7 - Html
Another way is to provide the border yourself in an image editing tool and upload that.