Grouping MarkDown elements in to DIV element or Custom html tag

Question

I have used Jeykll tool to generate mark down content into HTMl .

I want to group the below mark down elements in to div element or any other custom Html tag.

Marked Down

 #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 Output

  <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>

How to group the above markdown into Div element or any custom tag like this

<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

The answer depends in part on which Markdown parser you are using. As it happens, Jekyll supports a few different Markdown parsers. And you may need to set some options on the parser you are using to enable the appropriate features.

Generally speaking, Markdown requires you to use raw HTML to get a div. As the Syntax Rules explain:

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.

However, the syntax rules also state:

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.

In other words, you would need to define the entire div and everything in it as raw HTML. Essentially, you would need to copy your desired output from your question above and paste that into the Markdown document.

However, some Markdown parsers have added additional functionality which allows various shortcuts. For example, it appears that the parser you are using supports assigning attributes to the various parts of a document without falling back to raw HTML -- which leads me to believe that you are probably using Kramdown which has documented support for attribute lists.

As it turns out, Kramdown also includes optional support for parsing Markdown content inside HTML Blocks. While the docs explain all of the options, the basic idea is that if you set an attribute of markdown=1 on the raw HTML tag, then the content of that tag will be parsed as HTML. Like this:

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

Which would generate the following HTML output:

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

Of course, you can then assign a class on your div as well. Therefore, you final document would look like this:

<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>

Of course, if you are using a different Markdown parser, you will need to consult that parser's documentation to see if it supports a similar non-standard feature.