CODEWITHSUNDEEP
htmlgithubmarkdown
Alex Botev
Alex Botev

Reputation: 1399

Markdown - icon on the left of a title

so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title. Does anyway know any better way to do this?

First to show what I actually want is this (this was done with picture editor for demonstration): enter image description here

I have tried this:

![image-title-here](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png)
# Quite a long title, potentially going over several lines

Quite a long title, potentially going over several lines

This does not work at all

![](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png){:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines

{:style="float: right;margin-right: 7px;margin-top: 7px;"}

Quite a long title, potentially going over several lines

Using html like so, does not recognize the markdown:

<p align="center">
    ![]((https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png)
</p>

Using direct html also:

<div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div> 
# Quite a long title, potentially going over several lines

Here if the title is not on a new line it is not recognized as markdown.

EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this: enter image description here

The question is can we make the title to be aligned with the top of the image?

Upvotes: 3

Views: 13435

Answers (2)

Akarsh SEGGEMU
Akarsh SEGGEMU

Reputation: 2561

I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.

<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">

# Resume application project

This is how it looks, This images shows the preview of the above code

You can see the project readme by clicking on this link to the GitHub repository

Upvotes: 12

Greg Tarsa
Greg Tarsa

Reputation: 1642

Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.

One of the resources mentioned in that question is this whitelist.

If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.

What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.





    
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
  width="128"
  height="128"
  style="float:left;">
    # Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on

Upvotes: 2

Related Questions