【问题标题】:Markdown - icon on the left of a titleMarkdown - 标题左侧的图标
【发布时间】:2017-03-13 17:40:57
【问题描述】:

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

首先要展示我真正想要的是这个(这是用图片编辑器完成的,用于演示):

我试过这个:

![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,无法识别markdown:

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

也可以直接使用 html:

<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

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

EDIT 建议的答案在 stackoverflow 上看起来是正确的,但在我的 github 上它看起来像这样:

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

【问题讨论】:

  • 请展示您尝试过的内容。这个描述还不够清楚。
  • 我进行了编辑以尝试描述我想要的内容。如果您需要更多详细信息,请告诉我。

标签: html github markdown


【解决方案1】:

我在 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

这就是它的样子,

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

【讨论】:

    【解决方案2】:

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

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

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

    应该起作用(但不起作用):样式附加到图像本身。将其附加到 div 会影响整个 div。注意:&lt;h1&gt; 由图片和文字组成。

        
    <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

    【讨论】:

    • 啊,是的!不幸的是,在我的 github 上,标题从图片底部开始,请查看更新后的问题。
    • “在我的 github 上”是什么意思?我怀疑 H1 或 IMAGE 可能附加了一些 CSS,但我无法根据您的描述进行探索。您需要使用 Browser Inspector 中的 Computed Styles 选项卡来了解更多信息。 This article 是介绍。
    • 我的意思是当我将它应用到 github 存储库时。本质上,我希望在 github 呈现我的自述文件时以这种方式显示。我会阅读文章谢谢!
    • 我不熟悉 github repos 上的网页,但我有兴趣了解更多。你能给我指一个描述它们的页面吗?如果它在这些页面中谈论 HTML,则加分。
    • 这是我正在测试的仓库:github.com/botev/test。至于你的问题,我认为这是正确的地方:github.com/github/markup
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-01-22
    • 2021-06-16
    • 1970-01-01
    • 1970-01-01
    • 2017-07-31
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多