【问题标题】：Grouping MarkDown elements in to DIV element or Custom html tag将 MarkDown 元素分组到 DIV 元素或自定义 html 标记
【发布时间】：2015-06-05 22:29:50
【问题描述】：

我已经使用 Jeykll 工具将标记内容生成到 HTMl 中。

我想将以下标记元素分组到 div 元素或任何其他自定义 Html 标记中。

标记下来

 #Multiple Axis
    {:.title}
    Different types of data can be visualized in a single chart with the help of 
    {: .description}
    It can be used when we need to compare the trends of different kinds of data.
    {: .description}

HTML 输出

  <h1 id="multiple-axis" class="title">Multiple Axis</h1>
    <p class="description">Different typ`enter code here`es of data can be visualized in a single chart with the help of</p>
    <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>

如何将上面的 markdown 分组到 Div 元素或任何这样的自定义标签中

<div class="">    
     <h1 id="multiple-axis" class="title">Multiple Axis</h1>
        <p class="description">Different types of data can be visualized in a single chart with the help of</p>
        <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>       
    </div>

【问题讨论】：

抱歉跑题了。你能指出我在哪里可以找到有关代码中{: .title } 的任何信息吗？不知道这个功能。
@mahish 这些是attribute lists，这是一个非标准功能，只有少数解析器支持。 Kramdown 和 Python-Markdown（带有extension）是我所知道的唯一两个肯定支持它的。可能还有更多。

标签： html markdown jekyll

【解决方案1】：

答案部分取决于您使用的 Markdown 解析器。碰巧的是，Jekyll 支持几个不同的Markdown parsers。您可能需要在您使用的解析器上设置一些选项以启用相应的功能。

一般来说，Markdown 要求您使用原始 HTML 来获取 div。正如Syntax Rules 解释的那样：

Markdown 不是 HTML 的替代品，甚至更接近它。它的语法非常小，只对应非常小的 HTML 标记子集。我们的想法不是创建一种更容易插入 HTML 标记的语法。在我看来，HTML 标签已经很容易插入了。 Markdown 的想法是让阅读、编写和编辑散文变得容易。 HTML 是一种发布格式； Markdown 是一种写作格式。因此，Markdown 的格式化语法只解决了可以用纯文本表达的问题。

对于 Markdown 语法未涵盖的任何标记，您只需使用 HTML 本身。

不过，语法规则也说明：

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

换句话说，您需要将整个 div 及其中的所有内容定义为原始 HTML。本质上，您需要从上面的问题中复制所需的输出并将其粘贴到 Markdown 文档中。

但是，一些 Markdown 解析器添加了允许各种快捷方式的附加功能。例如，您使用的解析器似乎支持将属性分配给文档的各个部分，而不会退回到原始 HTML——这让我相信您可能正在使用 Kramdown，它已经记录了对 attribute lists 的支持。

事实证明，Kramdown 还包括对解析 HTML Blocks 内的 Markdown 内容的可选支持。虽然文档解释了所有选项，但基本思想是，如果您在原始 HTML 标记上设置 markdown=1 属性，则该标记的内容将被解析为 HTML。像这样：

<div markdown=1>
This will get parsed as *Markdown* content.
</div>

这将生成以下 HTML 输出：

<div>
<p>This will get parsed as <emphasis>Markdown</emphasis> content.</p>
</div>

当然，你也可以在你的 div 上分配一个类。因此，您的最终文档将如下所示：

<div class="someclass" markdown=1>

#Multiple Axis
{:.title}

Different types of data can be visualized in a single chart with the help of 
{: .description}

It can be used when we need to compare the trends of different kinds of data.
{: .description}

#Multiple Axis
{:.title}

Different types of data can be visualized in a single chart with the help of 
{: .description}

It can be used when we need to compare the trends of different kinds of data.
{: .description}

</div>

当然，如果您使用的是不同的 Markdown 解析器，则需要查阅该解析器的文档以查看它是否支持类似的非标准功能。

【讨论】：