将 MarkDown 元素分组到 DIV 元素或自定义 html 标签中

Question

我已经使用 Jeykll 工具将 mark down 内容生成到 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>

Answer 1

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

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

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

但是，语法规则还规定：

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

换句话说，您需要将整个 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 上分配一个 class。因此，您的最终文档将如下所示：

<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 解析器，您将需要查阅该解析器的文档以查看它是否支持类似的非标准功能。

将 MarkDown 元素分组到 DIV 元素或自定义 html 标签中

Grouping MarkDown elements in to DIV element or Custom html tag

html

markdown

jekyll

降价

HTML输出