blackfriday icon indicating copy to clipboard operation
blackfriday copied to clipboard

HTML comment breaks rendering

Open XhmikosR opened this issue 5 years ago • 0 comments

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">&lt;!-- Large button groups (default and split) --&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn-group&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;btn btn-secondary btn-lg dropdown-toggle&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">data-toggle</span><span class="o">=</span><span class="s">&#34;dropdown&#34;</span> <span class="na">aria-haspopup</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">&#34;false&#34;</span><span class="p">&gt;</span>
    Large button
  <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
  ...
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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.

XhmikosR avatar Feb 01 '19 10:02 XhmikosR