Redcarpet gem在封闭的跨度之外附加解析的降价

Question

在我的Rails应用程序中，我有一个textarea框，我希望人们可以使用markdown。 redcarpet gem可以很好地用于渲染markdown，但它会在之后将附加到封闭的span。这搞砸了我的设计;该段的顶部应出现在＆＃34; play＆＃34;图标和＆＃34;铅笔＆＃34;图标（与此图片中的标题相同）：

这里是带有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，它实际上是在跨度之后附加的。

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

考虑一下，考虑到在控制器中提前准备解析的降价，具有相同的效果，可能问题是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>。用div替换它们可能对您有用：

<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个div个子元素，因此它们仍然有效，并且不会被浏览器更改。