我如何看待在评论中发布 HTML 的方式

人们在这个网站的文章评论中发布了很多 HTML 代码。他们试图演示某些内容、寻求故障排除帮助、展示替代技术等。这非常好。我尽可能地鼓励这种行为。不幸的是，人们经常对如何正确地做到这一点感到困惑，并在结果出错时感到沮丧。

我必须在评论区发布说明，以教人们本网站的最佳方法

您可以使用基本的 HTML
发布代码时，请将所有 < 字符转换为 <
如果代码是多行的，请使用 <pre><code></code></pre>

理想情况下，我希望完全摆脱所有这些说明，并让一切都“正常工作”。以下两个更改将使本网站评论的理想状态更加接近

1. 任何不是“允许的标签”之一的 HTML 都将被转义。

WordPress 具有此默认允许的标签集

<a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<cite>
<code>
<del datetime="">
<em>
<i>
<q cite="">
<strike>
<strong>

如果有人在评论中使用这些标签，它们将应用于该文本并适当地呈现。如果他们使用任何其他标签，则应将其转义，而不是被删除或不适当地呈现。所以

我也想说，如果这是一行代码，如本例所示（不包含换行符），则应将新转义的代码包装在<code></code>标签中。

此外，如果代码已被转义，例如 <span>，则将其保留。

2. 确保多行代码用 <pre> 标签包裹

如果有人输出多行代码（无论是将其放在 <code> 标签中，还是它不是允许的标签，因此它自动转义并自动代码包装），则该多行代码应包装在 <pre></pre> 标签中。

这还应该去除代码块开头和结尾的空格，因此不会呈现额外的空格。这个

<pre><code>
<ul>
  <li>

应该变成

<pre><code><ul>
  </li><code></pre>

这将是评论者自己使用标签还是根据上述规则自动生成。

CMS 独立

我在这里特别想到的是 WordPress，因为我一直都在使用它，但我可以想象这在任何允许部分但不是全部 HTML 标签的评论环境中都很有用，并且讨论可能涉及讨论 HTML 的极客是合理的。嘿，也许这应该是一个 WordPress 插件，对吧？眨眼眨眼。

Jan-Marten

# 2011 年 8 月 19 日

谢谢。早该知道这一切。很遗憾我们需要你的帮助来编辑或删除我们自己的评论，但这应该会有很大帮助。有一些巧妙的方法可以实现这一点，可以使用 JavaScript（在你的情况下为 jQuery）和 PHP。

考虑过这个吗？

$("pre").children("code").each(function(){
    $(this).html(
        $(this).html().
                split('<').join('&lt;').
                split('>').join('&gt;')
    );
});

Mathias Bynens

评论永久链接# 2011 年 8 月 19 日

你甚至不需要 .split('>').join('>') 部分。
Chris Coyier

评论永久链接# 2011 年 8 月 19 日

巧妙的想法=) 但我宁愿从后端而不是前端处理这个问题，理想情况下。例如，如果标签作为不允许的标签完全被剥离，则此方法将不起作用。
Nico

评论永久链接# 2011 年 8 月 23 日

我喜欢这个主意，但你在数据库中写入时应该对其进行转义！我记得 YouTube 因 HTML if 语句而被“黑客入侵”的那一天；)

Kevin Sweeney

# 2011 年 8 月 19 日

老实说，最重要的是我希望能够编辑我的评论并更正可能犯的任何错误。也就是说，我非常喜欢 Markdown，并且喜欢能够使用反引号来内联调用代码片段（通常是变量、类或 HTML 标签）以及用于多行代码块。

# 2011 年 8 月 19 日

所以……Chris……我们什么时候可以期待在这个网站上看到这个功能？（顺便说一句，这种新的样式很棒。）

Paul Irish

# 2011 年 8 月 19 日

我也一直在考虑……当你粘贴时，你能看到是否有包含额外空格的多行粘贴内容，并将其自动视为代码块吗？

Mathias Bynens

# 2011 年 8 月 19 日

这就是为什么我认为每个 Web 开发博客/网站都应该使用 Markdown。反引号创建内联代码跨度（<code>，四个空格缩进创建代码块（一个 <pre><code>，以及两行之间所有内容都用三个反引号括起来也会成为代码块（如果你不想用四个空格缩进代码块中的每一行）。

Chris Coyier

评论永久链接# 2011 年 8 月 19 日

是的，我也喜欢 Markdown，但我不希望依赖它。我认为这会使问题变得更糟。现在又有一件需要“学习”才能正确评论的事情了。我希望它能够正常工作，而无需过多考虑。但理想情况下，它还将支持 Markdown。
Eli Gundry

评论永久链接# 2011 年 8 月 19 日

我认为应该有一个选项可以将评论表单切换到 Markdown 模式。这样你就不会强迫任何人使用它，同时让高手们玩代码。

Noury Janse

# 2011 年 8 月 19 日

你好，

网上不应该有一些基本的生成器来做这件事吗？只需输入你想要显示为代码的 HTML 并将其取回？不是你可以用来突出显示的插件，而只是一些生成器。

无论如何，感谢你对此的见解。有时显示代码真的很让人沮丧;-）。

致意

Chris Coyier

# 2011 年 8 月 19 日

经典示例刚刚在几分钟前的另一篇文章中出现：http://cl.ly/9QJ2

Chris Coyier

评论永久链接# 2011 年 8 月 19 日

又一次……http://cl.ly/9QD4

这是一个合法的在这些地方出现的问题。允许编辑可能是第一步。
Billy Brown

评论永久链接# 2011 年 8 月 23 日

电子邮件地址没有很好地隐藏。

Chris Cox

# 2011 年 8 月 19 日

你正在查看那里的“preprocess_comment”过滤器。也许你可以首先将 < 和 > 包围的所有字符实例与 $allowedtags 数组进行比较，并将不匹配的字符替换为 < 和 >。

第二阶段可能是解析结果文本中由一个或多个换行符分隔的两个或多个 < 和 > 实例。

我想在这里试着写点东西，但现在太晚了，我很难思考，而且我不确定 WP 会如何处理它。顺便说一句，我喜欢你的评论预览。

Hassan

# 2011 年 8 月 19 日

这是我针对第一个问题找到的解决方案。

function boom_comment_code( $comment ) {
	global $allowedtags;

	$tags = '';
	foreach( $allowedtags as $tag => $atts )
		$tags .= $tag . '|';

	$comment = preg_replace_callback( "/(<[^$tags]+.*?)/i", 'boom_comment_escape_tags', $comment );
	return $comment;
}
add_filter( 'get_comment_text', 'boom_comment_code' );

function boom_comment_escape_tags( $matches ) {
	return htmlentities( $matches[0] );
}

不过有一个问题，转义标签内的允许标签没有被转义。正则表达式应该修复，但我不知道怎么做！:)

另请注意，我正在使用 get_comment_text 过滤器，它是非破坏性的，不会更改数据库中的数据。

Hassan

评论永久链接# 2011 年 8 月 19 日

嘿，它刚刚破坏了我的多行代码文本！

Jonathan

# 2011 年 8 月 19 日

我犯过这样的错误，并且在这个博客上写了一些需要编辑的评论（为此表示歉意）。

但是，当我开始自己写文章时，我决定创建一个 html 实体编码器，它可以用于复制/粘贴或写入代码（已经有很多了，但显然这是我最喜欢的使用方式）。

此外，这个评论预览是一个很棒的想法！

Aaron Stone

评论永久链接# 2011 年 8 月 20 日

该实体转换链接（http://jonathanjanssens.com/lab/htmlencoder/）可能应该在 CSS-Tricks 的“评论”说明中提及，以便在客户端实时转换这些 < 和 > 为 &amplt; 和 &ampgt;（可能使用 JavaScript）。

Noah Hendrix

# 2011年8月19日

我更喜欢嵌入（或链接到）GitHub gists。也许您可以解析这些链接（和其他流行的链接）并将它们转换为嵌入的代码块。您可以在 Twitter 的网站上看到这一点。

Louis

# 2011年8月20日

哦，我喜欢你新的评论预览。我曾经尝试在我的网站上找到一个合适的评论预览脚本/插件，但没有找到。我测试了 James Padolsey 使用的那个，但我发现它有一些问题。甚至不记得是什么问题了。我记得与多行代码块有关。

您使用的是此插件吗？

http://wordpress.org/extend/plugins/live-comment-preview/

如果是，我可能会尝试一下，谢谢！

Khalid

评论永久链接# 2011年8月20日

我在标记中找到了以下 ID：div-comment-lcp。最后一部分 (lcp) 可能是 Live Comment Preview 的缩写，即您提到的插件。

Andy

# 2011年8月20日

我在我的论坛上使用的解决方案的一部分是实时预览，就像您在这里看到的那样。这比任何其他事情都更能让我在发帖/评论时安心，并消除了对编辑功能的大量需求。

我也在使用 Markdown，或者更确切地说是一个名为 Showdown 的客户端版本（其原始页面似乎已消失）。这样做的好处是论坛帖子在服务器上以用户输入的完全相同的方式存储，并且对 HTML 的表示转换是在客户端完成的。

显然，如果禁用 JS，这将不起作用，但由于我的论坛在根本上依赖 JS 才能工作，因此我没有认为这是一个大问题。如果我制作一个非 JS 版本，它可以按原样呈现 Markdown 编码的帖子，因为 Markdown 非常不显眼。

Ryan Carson

评论永久链接# 2011年8月22日

听起来您可能过于依赖 Javascript 进行输入清理，因为论坛帖子在服务器上以用户输入的完全相同的方式存储。

如果尚未到位，我会使用一些服务器端代码在将数据保存到服务器之前对其进行清理。

Dave

# 2011年8月20日

不久前我遇到了同样的困境。我决定尝试自己编写一个网站，从头开始，部分是为了学习工具，部分是因为它可以让我非常具体地说明人们可以做什么和不能做什么。

最后，我发现最简单的解决方案是转义所有 HTML，并允许使用 BBCode 进行简单的操作，例如文本格式化、插入代码块等。

对我来说，确定应转义哪些 HTML 以及应保留哪些 HTML 的逻辑过于复杂，尤其是在评论中间插入代码部分时。

Dave

评论永久链接# 2011年8月20日

哦，当然，它不需要用户（或我自己）手动转义任何内容，因为网站必须转义的内容（HTML）和应保留并随后转换为 HTML 的内容（BBCode）之间存在明显的区别。

Webdesign

# 2011年8月20日

关于评论的不错文章。我认为内容将帮助我在未来发表更多评论。谢谢！

Rigo B Castro

# 2011年8月20日

极好的资源……这对我有帮助。

Andy Paddock

# 2011年8月20日

最新版本的 WordPress 已经这样做了（无需转换小于号），但是为评论者提供一个简单的编辑器有多难呢？

Avinash

# 2011年8月20日

一如既往的精彩文章……
感谢分享这些信息。。

Jim Walsh

# 2011年8月21日

我真的很喜欢 Stack Overflow 处理代码输入的方式。

Peter Wilson

# 2011年8月21日

我喜欢 WordPress.org 论坛中使用的技巧，其中反引号 (`) 用于包围代码，无论是内联还是多行。

可以在检查允许的标签之前使用过滤器和正则表达式将 < 更改为 < 等。

它仍然需要说明，但它们已简化以涵盖两种用例。

Jon Brown

# 2011年8月21日

在整个网络上，我遇到的问题是不知道使用哪种方法，如果没有一个难看的“厨房水槽”类型的工具栏，我就永远不知道在哪里可以使用 Markdown 或可以使用哪些 HTML 等……

Chris，在“您可以使用基本 HTML”中添加一个工具提示类型的东西来解释什么是基本 HTML 可能很酷。

哦，Ajax 编辑评论是一个很酷的插件……

Drazen Mokic

# 2011年8月22日

绝对支持能够编辑我的评论。

Hongphuc

# 2011年8月23日

非常好！
感谢分享这些信息。。

Daquan Wright

# 2011年8月24日

哈哈，我很高兴 Chris 发布了这篇文章。前几天我用一个非常草率的评论让自己难堪，当时我试图通过 HTML 演示一些东西，我的代码完全乱七八糟。甚至外星人都不可能理解我的信息，不用说我当时非常生气，哈哈。

允许我编辑我的评论，谢谢再见。;)

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。