Redcarpet gem 在封闭范围之外附加解析的降价

Question

在我的 Rails 应用程序中，我有一个 textarea 框，我希望人们能够在该框上使用 markdown。 redcarpet gem 可以很好地用于渲染降价，但它会将其附加在 封闭跨度之后。这搞砸了我的设计；段落的顶部应该出现在“播放”图标和“铅笔”图标之间（与这张图片中的标题相同）：

这是带有markdown 调用的html.erb。如您所见，它完全包含在<span> 标签中：

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"><%= markdown(@user.description) %></span>
</p>

这是通过 ERb 和 Redcarpet 呈现 HTML 的方式：

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"></span></p>
<p>
  Hi! I started <a href="https://www.startthis.org" rel="nofollow" 
  target="_blank">StartThis.org</a>. My background is in philosophy (Ph.D., 
  Ohio State, 2000). I like ideas and thinking them through. I also like 
  organizing things online, especially educational and reference projects.
</p>
(etc.)

换句话说，markdown 方法被调用（并且我希望它被插入）span#user_title_text，它实际上是在 span 之后附加的。

解决此问题的最佳方法是什么？我寻找类似的问题，但找不到任何问题。我想我可以在辅助方法的字符串中准备 HTML 并将其单独传递给视图（也许？不，我刚刚尝试过，它具有相同的效果！），但是对此的最佳实践/解决方案是什么？抱歉，如果这有点明显，我对这一切都是菜鸟。

再想一想，考虑到提前准备好解析后的markdown，在controller中，效果是一样的，可能问题出在rails/ERb是怎么插值的？

TIA

更新：注意上面代码中的<p>。这包围了一个围绕降价调用的跨度......它生成<p>标签！

还要注意上面代码中的  。在修复 <p> 标签（将它们更改为 <div>s）后，感谢 Matt 的建议，我尝试删除 html 实体......然后它被修复了。为什么？！

再次TIA。

Answer 1

您是否在浏览器的检查器中查看渲染的源代码？

我认为正在发生的事情是 HTML 正在按照您的预期呈现，结果如下：

<p class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <span id="user_title_text"><p>Hello, here is some markdown.</p>

<p>Here is another paragraph.</p>
</span>
</p>

但是，这不是有效的 HTML，因为它在另一个 <p> 中包含一个 <p>，因此浏览器在解析它时会更正它。它通过在下一个打开的<p> 标签之前添加任何需要的关闭标签来做到这一点，结果就是您在浏览器中看到的内容。

要修复它，您需要确保您的模板将生成有效的 HTML，无论用户输入什么标记。特别是在这里您需要更改周围的p，并且（因为p 不允许作为span 的子级）您需要更改最后一个<span>。用divs 替换它们可能对你有用：

<div class="user_desc">
  <span class="glyphicon glyphicon-play"></span>&nbsp;&nbsp;
  <span class="glyphicon glyphicon-pencil"></span>
  <div id="user_title_text"><%= markdown(@user.description) %></div>
</div>

由于这会生成 p 元素，它们是 divs 的子元素，因此它们仍然有效并且不会被浏览器更改。