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>或其他类似块元素之类的块元素内，那么它将应用{ {1}}标记用于环绕图像。

要了解Markdown如何编译文档，我发现Babelmark 2是一个有用的资源，值得一试，看看你使用的markdown编译器是否正在按照你的意愿进行。

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

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

Answer 2

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

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

请注意，如果他们不以＆＃34; http：//＆＃34;，＆＃34; https：/＆＃34;或＆＃34; /＆＃34;。这是因为我的博客图像具有可靠的组织结构，并且在使用此部分时更简单，我只需要图像名称而不需要其路径的其他部分。

这是部分：

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 的降价解析器）：

在目录 _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

嘿，快点！它有效。

Markdown使用段落标签编译图像

3 个答案: