Html 在Markdown中，是否有方法阻止图像被<；p>；标签？

我使用的是Jekyll，为了方便起见，我所有的帖子都是.md格式的。 问题是生成器会自动包装段落标记中的每一行

line

<img>

line

行
线

变成

<p>line</p>

<p><img></p>

<p>line</p>

行


线

这意味着我的图片被限制在我为段落设置的宽度范围内，这会弄乱我的风格

有什么办法可以避免这种情况吗？我尝试了图像的html语法和标记语法，但似乎没有任何效果

---

谢谢

我不这么认为。原件：

段落只是一行或多行连续的文本，由一行或多行空行分隔

不过，可能会想出一些漂亮的CSS来解决您的样式问题

或者你可以试试这个黑客（在潘多克工作）：

行
线

图像是内联元素，旨在驻留在块级元素（如段落）中。因此，Markdown解析器正在纠正您的“错误”，并将img包装在段落标记中

将img标记包装在适当的块级元素（如figure）中可以防止这种行为。例如：

<figure><img src=""></figure>

如果您想让事情自动化一点，并且不打算在Github页面上生成站点（不允许使用插件），那么您可以使用插件来帮助实现这一点，并使在帖子中插入图像变得更容易。我正在使用此插件的修改版本：

---

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

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

以下是部分内容：

partials/\u 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>
{:/}

{：：nomarkdown}
{:/}

这样称之为局部的

将不添加前缀：

<%= 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" } %>

将添加前缀：

<%= 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" } %>

---

我将此部分保持最新（以防我添加/编辑其中任何部分）。

以下是一些javascript，它们将为您打开：

const allPTags = document.querySelectorAll("p");

allPTags.forEach((elem) => {
    if (elem.innerText === "" && elem.childNodes.length === 1 && elem.childNodes[0].tagName === "IMG") {
        elem.parentNode.insertBefore(elem.childNodes[0], elem);
        elem.remove();
    }
});

---

如果您无法避免使用，请将重新定义为尽可能空白。创建一个新的标记来替换它的预期用途和样式。不过，我不想完全破坏语义：）还有专门针对jekyll的其他选项吗？