Jekyll Markdown，如何在段落标签中编译图片

Question

Jekyll Markdown，如何在段落标签中编译图片

5

这只是一个简单的问题，但我找不到谷歌上的解决方法。基本上发生的情况是，我有一个 Jekyll 网站，并使用 kramdown 进行 markdown 编译。

当我向 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代码添加

标签？

- j-mes

1

在Markdown中，有没有一种方法可以阻止图像被包装在p标签中？ - David Jacquel

4个回答

1

这是我最终采用的解决方案，基于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

哇塞！它运行了。

- Tom P

1

这是我在这里的答案转载，其中我使用部分内容来涵盖博客的所有图像需求。

正如其他人所说，图像是行内元素，Markdown解析器将强制将它们包装在块级元素中。目前被接受的答案是hacky：它在你的markdown中看起来很乱，不够健壮/可扩展，并且不容易修改。我在我的博客上使用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" } %>

我会将此部分内容保持最新在这里（以防我添加/编辑任何内容）。

- James L.

0

我注意到图像和其他非块级元素的行为相同。

添加一个类似于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;
}

- KargWare

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- j-mes · Accepted Answer

感谢David Jacquel指点迷津。

似乎图像是一个内联元素，如果Markdown检测到一个不在块元素中（如<figure></figure>，<div></div>或其他类似的块元素）的图像，则会将<p></p>标签应用于图像周围。

为了查看Markdown编译文档的方式，我发现Babelmark 2是一个有用的资源，并值得尝试，以查看您正在使用的Markdown编译器是否符合您的要求。

这里有一个示例，它展示了我在这个特定问题上被David Jacquel指出后使用Babelmark 2找出的结果。

我希望这将帮助那些遇到相同问题的人，并且没有注意到它是一个内联/块元素问题。