Jekyll Markdown，用段落标签编译图片

Question

这只是一个简单的问题，但我无法在 Google 上找到它来解决这个问题。基本上发生的事情是我有一个 Jekyll 网站，并且我正在使用 kramdown 进行降价编译。

当我将图像添加到如下的降价文件时：

![Image Alt Tag](path/to/image)

当我不想要它时，它会使用<p> 标签编译它，如下所示。

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

这就是我希望 markdown 文件使用图像标签编译的方式

<img src="path/to/image alt="Image Alt Tag" />

我想知道我哪里出错了，或者为什么 Jekyll 编译带有段落标签的图像。

提前致谢

---编辑：尝试了另一种方式，但最终遇到了同样的问题

我已经试过了，只添加了下面的html 代码：

<img src="path/to/image" alt="Image Alt Tag" />

它仍然可以通过添加<p> 标签进行编译，如下所示。

<p><img src="path/to/image" alt="Image Alt Tag" /></p>

我想知道为什么markdown文件在不需要的时候还在给html代码添加<p>标签？

Answer 1

感谢David Jacquel 让我走上了正确的道路。

似乎图像是内联元素，如果 Markdown 检测到不在块元素内的图像，例如 <figure></figure>、<div></div> 或其他类似的块元素，那么它将应用 <p></p> 标签到环绕图像。

要了解 Markdown 是如何编译文档的，我发现 Babelmark 2 是一个有用的资源，值得一试，看看您正在使用的 Markdown 编译器是否正在执行您希望它执行的操作。

这是 example 在 David Jacquel 指出这个特定问题后我使用 Babelmark 2 弄清楚的。

我希望这对遇到同样问题的人有所帮助，并且没有注意到这是一个内联/块元素问题。

Answer 2

这是我的回答 here 的转贴，我在其中使用部分来满足博客的所有图像需求。

正如其他人所说，图像是内联元素，Markdown 解析器会强制将它们包装在块级元素中。当前接受的答案是 hacky：它在您的降价中看起来很乱，不健壮/可扩展，并且不容易修改。我将 Middleman 用于我的博客，并为我的图像创建了一个部分，它可以完成我想要图像做的所有事情。我假设/希望 Jekyll 也有部分内容，并且这个答案虽然在语法上与 Jekyll 不同，但仍然与您相关。

请注意，如果图片链接不以“http://”、“https://”或“/”开头，我会为其添加前缀。这是因为我的博客图片有一个坚实的组织结构，并且在使用这个部分时更简单，我只需要图片名称而不需要其路径的其他部分。

这是部分内容：

partials/_image.erb

<%
#initialize local variables in case they were not included
caption ||= ""
alt ||= ""
classes ||= ""

#strip '.html' extension off article link to get name of folder
url = current_article.url
url_without_ext = url[0..url.length-6]

#determine if image has an exact link or belongs to "/images/blog/CURRENT_ARTICLE_NAME/"
prefix = src[0..6]
if prefix != "http://" and prefix != "https:/" and src[0] !="/" then
  #image belongs to "/images/blog/CURRENT_ARTICLE_NAME/" - add prefix to src
  src = "/images#{url_without_ext}/#{src}"
end
%>

<!-- Use Kramdown's 'nomarkdown' tag so that this figure is not wrapped in a 'p' tag in the blog pages that use this partial -->
{::nomarkdown}
<figure class="<%= classes %>">
  <!-- Show the image and link to the full resolution on click-->
  <a target="_blank" href="<%= src %>" >
    <img src="<%= src %>" alt="<%= alt %>">
  </a>

  <figcaption><%= caption %></figcaption>
</figure>
{:/}

然后这样称呼这个部分

不会添加前缀：

<%= partial "partials/image.erb", locals: {
    src: "/images/icons/tech/atom.svg",
    alt: "Atom",
    classes: "icon" } %>

将添加前缀：

<%= partial "partials/image.erb", locals: {
    src: "my-lovely-dog.svg",
    alt: "Dog",
    caption: "Woof woof!",
    classes: "icon" } %>

我保持这个部分是最新的here（以防我添加/编辑它）。

Answer 3

这是我最终使用的解决方案，基于this response 对 Kramdown 回购中的一个问题。 （Kramdown 是 Jekyll 的 markdown 解析器）：

在目录_plugins 中创建一个名为例如的文件。 kramdown-image-parsing.rb 包含以下内容...

require 'kramdown/converter/html'

module StandaloneImages
  def convert_p(el, indent)
    return super unless el.children.size == 1 && (el.children.first.type == :img || (el.children.first.type == :html_element && el.children.first.value == "img"))
    convert(el.children.first, indent)
  end
end

Kramdown::Converter::Html.prepend StandaloneImages

嘿，快！它有效。

Answer 4

我观察到图像和其他非块元素的行为相同。

添加像 handle-as-span 这样的 css 类将创建一个选项，通过 css 将 display 属性更改为 inline。

{: .handle-as-span }
![Image Alt Tag](path/to/image)

生成的 HTML

<p class="handle-as-span"><img src="path/to/image" alt="Image Alt Tag" /></p>

这里是 CSS 魔法

p.handle-as-span {
  display: inline;
}