markdown-nested-tags.md

commonkmark's markdown nested tags alternatives

What if we don't want to use raw html?

<div>What's <div>There</div></div>

What other tags can we nest using commonkmark without raw html?

## blockquote + blockquote {#the-blockquotes}
> What's
>> There

---------- h2 + a {#the-h2s} ----------
[Keep peanut bag closed
to avoid squirrel attack!]()
----------------------------


## ul + ul {#the-uls}
* What's
    * There

## ol + ul {#the-ols}
1. What's
    * There

## p + a {#the-ps}
What's [ There ]()

blockquote + blockquote {#the-blockquotes}

What's

There

---------- h2 + a {#the-h2s} ---------- Keep peanut bag closed to avoid squirrel attack!

ul + ul {#the-uls}

• What's
  • There

ol + ul {#the-ols}

1. What's
   • There

p + a {#the-ps}

What's There

Using {commonmark} in R:

<h2>blockquote + blockquote {#the-blockquotes}</h2>
<blockquote>
<p>What's</p>
<blockquote>
<p>There</p>
</blockquote>
</blockquote>
<h2>---------- h2 + a {#the-h2s} ----------
<a href="">Keep peanut bag closed
to avoid squirrel attack!</a></h2>
<h2>ul + ul {#the-uls}</h2>
<ul>
<li>What's
<ul>
<li>There</li>
</ul>
</li>
</ul>
<h2>ol + ul {#the-ols}</h2>
<ol>
<li>What's
<ul>
<li>There</li>
</ul>
</li>
</ol>
<h2>p + a {#the-ps}</h2>
<p>What's <a href=""> There </a></p>

Using markdown-it with markdown-it-attrs in nodejs:

<h2 id="the-blockquotes">blockquote + blockquote</h2>
<blockquote>
<p>What's</p>
<blockquote>
<p>There</p>
</blockquote>
</blockquote>
<h2>---------- h2 + a {#the-h2s} ----------
<a href="">Keep peanut bag closed
to avoid squirrel attack!</a></h2>
<h2 id="the-uls">ul + ul</h2>
<ul>
<li>What's
<ul>
<li>There</li>
</ul>
</li>
</ul>
<h2 id="the-ols">ol + ul</h2>
<ol>
<li>What's
<ul>
<li>There</li>
</ul>
</li>
</ol>
<h2 id="the-ps">p + a</h2>
<p>What's <a href=""> There </a></p>

What github rendered:

<div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">blockquote + blockquote {#the-blockquotes}</h2><a id="user-content-blockquote--blockquote-the-blockquotes" class="anchor" aria-label="Permalink: blockquote + blockquote {#the-blockquotes}" href="#blockquote--blockquote-the-blockquotes"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
<blockquote>
<p dir="auto">What's</p>
<blockquote>
<p dir="auto">There</p>
</blockquote>
</blockquote>
<div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">---------- h2 + a {#the-h2s} ----------
<a href="">Keep peanut bag closed
to avoid squirrel attack!</a></h2><a id="user-content------------h2--a-the-h2s-----------keep-peanut-bag-closedto-avoid-squirrel-attack" class="anchor" aria-label="Permalink: ---------- h2 + a {#the-h2s} ----------
Keep peanut bag closed
to avoid squirrel attack!" href="#-----------h2--a-the-h2s-----------keep-peanut-bag-closedto-avoid-squirrel-attack"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
<div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">ul + ul {#the-uls}</h2><a id="user-content-ul--ul-the-uls" class="anchor" aria-label="Permalink: ul + ul {#the-uls}" href="#ul--ul-the-uls"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
<ul dir="auto">
<li>What's
<ul dir="auto">
<li>There</li>
</ul>
</li>
</ul>
<div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">ol + ul {#the-ols}</h2><a id="user-content-ol--ul-the-ols" class="anchor" aria-label="Permalink: ol + ul {#the-ols}" href="#ol--ul-the-ols"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
<ol dir="auto">
<li>What's
<ul dir="auto">
<li>There</li>
</ul>
</li>
</ol>
<div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">p + a {#the-ps}</h2><a id="user-content-p--a-the-ps" class="anchor" aria-label="Permalink: p + a {#the-ps}" href="#p--a-the-ps"><svg data-component="Octicon" class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div>
<p dir="auto">What's <a href=""> There </a></p>
``