将markdown与html混合以包含图像和空行含义答案

【问题标题】：Mixing markdown with html for including image and empty line meaning将markdown与html混合以包含图像和空行含义
【发布时间】：2017-10-02 09:17:58
【问题描述】：

当我输入以下内容时：

|![alt ]({attach}img/myimg.png "hint1")|

鹈鹕将按预期生成图像。我想用html来定制食物所以我用了：

<p align="center">
![alt ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

但鹈鹕只生产：

![alt ]({attach}img/myimg.png "hint1")
Figure 1.

但是，如果我将第一个表和第二个 html 放在没有空分隔线的情况下，如下所示：

|![Attention architecture ]({attach}img/myimg.png "hint1")|
<p align="center">
![Attention architecture ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

我有两张图片..但是...当我在第一个和第二个图片指令之后放置空行时，例如：

|![Attention architecture ]({attach}img/myimg.png "hint1")|

<p align="center">
![Attention architecture ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
</p>

那么只有第一条指令包含预期的图像，而第二条则没有，并产生相同的结果：

  ![alt ]({attach}img/myimg.png "hint1")
    Figure 1.

如何使用这种 HTML 包含图片的方式？

【问题讨论】：

标签： html markdown pelican

【解决方案1】：

简而言之，不能使用 HTML 来包装 Markdown。 Markdown 不在 HTML 内部处理。但是您可以使用 Markdown 扩展来为生成的 HTML 分配属性。

作为rules 状态：

Markdown 格式化语法不会在块级 HTML 标记中处理。例如，您不能在 HTML 块中使用 Markdown 样式的 *emphasis*。

当然，您想知道为什么当您在 <p> 标记之前的行中包含一行文本时，它似乎会起作用。规则还解释了：

唯一的限制是块级 HTML 元素——例如<div>、<table>、<pre>、<p> 等 — 必须与周围的内容用空行分隔，并且块的开始和结束标记不应使用制表符或空格缩进。 Markdown 足够聪明，不会在 HTML 块级标签周围添加额外的（不需要的）<p> 标签。

在您的情况下，缺少空行会导致解析器无法将 <p> 标记识别为原始 HTML 块。因此，它将块包装在它自己的一个额外的<p> 标记中，从而生成无效的 HTML。因此，样式挂钩可能无法按您的意愿应用。

Pelican 包含对 Markdown 扩展的支持，包括默认情况下与 Markdown 解析器一起安装的 Attribute List Extension。你只需要enable它（向下滚动到Markdown）。将以下内容添加到您的配置文件中：

MARKDOWN = {
    'extension_configs': {
        'markdown.extensions.attr_list': {}
}

然后您可以在 Markdown 中包含属性列表以分配各种样式挂钩。

![alt ]({attach}img/myimg.png "hint1")
<br>
Figure 1.
{: align=center }

【讨论】：