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

Question

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

当我将图像添加到 markdown 文件时，如下所示：

![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 编译器是否正在执行您希望它执行的操作。

这是示例，在 David Jacquel 指出这个特定问题后，我使用 Babelmark 2 解决了这个问题。

我希望这对遇到同样问题但没有注意到这是一个 inline/block 元素问题的人有所帮助。

Answer 2

这是我的回答 here 的重新发布，我在其中使用部分内容来满足博客的所有图像需求。

正如其他人所说，图像是内联元素，Markdown 解析器会强制将它们包装在块级元素中。目前接受的答案是 hacky：它在你的降价中看起来很乱，不是 robust/extensible，而且不容易修改。我将 Middleman 用于我的博客，并为我的图像创建了一个部分，它可以完成我想让图像做的所有事情。我 assume/hope 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（以防我add/edit其中任何一个）。

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

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

添加 css-class，如 handle-as-span 将创建一个选项，通过 [=] 将 display 属性更改为 inline 24=].

{: .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;
}

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

Jekyll Markdown, compiling images with paragraph tags

markdown

jekyll

liquid

github-pages