Markdown - 标题左侧的图标

时间:2017-03-13 17:40:57

标签: html github markdown

所以我想要的是在给定的H1主标题左侧有一个图标。不幸的是,到目前为止我没有找到任何方法来实现这一目标。一个潜在的变体是为两者编写裸骨HTML,但是,我没有从标题中获得降价的好处。 无论如何知道更好的方法吗?

首先要展示我真正想要的是这个(这是用图片编辑器进行的演示): enter image description here

我试过这个:

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

相当长的标题,可能会超过几行

这根本不起作用

![](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;"}

相当长的标题,可能会超过几行

像这样使用html,无法识别降价:



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

还使用直接html:

&#13;
&#13;
<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
&#13;
&#13;
&#13;

如果标题不在新行上,则不会将其识别为降价。

编辑建议的答案在stackoverflow上看起来是正确的,但在我的github上它看起来像这样: enter image description here

问题是我们可以让标题与图像的顶部对齐吗?

2 个答案:

答案 0 :(得分:2)

我在GitHub项目存储库README.md文件的标题之前使用了图像html标签和一个空格。在左侧设置我的图片,在右侧设置标题。这是它的代码。

<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 images shows the preview of the above code

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

答案 1 :(得分:1)

坏消息,GitHub不支持README.md文件中的完整HTML元素集。 Here is a write-up关于支持 的内容。我在4年前的this StackOverflow question中也发现了一点。

该问题中提到的资源之一是this whitelist

如果它有用,你需要的是类似于下面的内容,我保留供你参考。描述针对您的问题描述。不幸的是,看起来GitHub会覆盖style属性,将其替换为width: 100%,并强制文本包裹在图像下方。

应该起作用(但不是):样式附加到图像本身。将其附加到div会影响整个div。注意:<h1>包含图片和文字。

    
<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