blackfriday
blackfriday copied to clipboard
HTML comment breaks rendering
Hello!
I'm in the process of migrating Bootstrap's main site to Hugo.
I hit a case where Markdown stops rendering to HTML if there's any HTML comment. Reduced test case:
---
layout: docs
title: Dropdowns
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
group: components
toc: true
---
## Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
## foo
<div class="bd-example"></div><!-- /whatever comment here -->
## this isn't rendered as HTML
{{< highlight html >}}
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
...
</div>
{{< /highlight >}}
## this isn't rendered as HTML either
### neither is this
Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<div class="bd-example">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</div>
</div>
becomes:
<h2 id="sizing">Sizing</h2>
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
<h2 id="foo">foo</h2>
<div class="bd-example"></div><!-- /whatever comment here -->
## this isn't rendered as HTML
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="c"><!-- Large button groups (default and split) --></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-group"</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary btn-lg dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup</span><span class="o">=</span><span class="s">"true"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
Large button
<span class="p"></</span><span class="nt">button</span><span class="p">></span>
...
<span class="p"></</span><span class="nt">div</span><span class="p">></span></code></pre></div>
## this isn't rendered as HTML either
### neither is this
Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<div class="bd-example">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
</div>
</div>
I removed the comment, but I wasn't sure if this is a bug or not so I thought I'd report this.