How I Think Posting HTML In Comments Should Work

Avatar of Chris Coyier
Chris Coyier on

People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as possible. Unfortunately people are often confused on how to do it correctly and get frustrated when it comes out wrong.

I have to post instructions in the comment area to teach people the best way for this site:

  • You can use basic HTML
  • When posting code, please turn all < characters into &lt;
  • If the code is multi-line, use <pre><code></code></pre>

Ideally I’d like to get rid of all of those instructions completely, and have everything “just work”. Here are two changes that would get pretty close to ideal for comments on this site:

1. Any HTML that isn’t one of the “allowed tags” gets escaped.

WordPress has this default set of allowed tags:

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

If someone uses these tags in a comment, they will apply to that text and render appropriately. If they use any other tag, it should escape, not be stripped or inappropriately render. So:

I’d also say that if it’s a single line of code as in this example (does not contain line breaks) it should wrap the newly escaped code in <code></code> tags.

Also, if the code is already escaped like &lt;span&gt; then leave it alone.

2. Make sure multi-line code is wrapped in <pre> tags

If someone puts out multiple lines of code (either they put it in <code> tags or it’s not allowed tags so it auto-escapes and auto-code-wraps it), that multi-line code should be wrapped in <pre></pre> tags.

This should also strip whitespace from the beginning and end of the code block, so no extra spaces get rendered. This:

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

Should turn into:

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

This would be whether the commenter uses the tags themselves or they are auto-generated based on the above rules.

CMS Agnostic

I’m specifically thinking of WordPress here because that’s what I always use, but I can imagine this being useful in any commenting environment that allows some-but-not-all HTML tags and is reasonable that the discussion may involve nerds discussing HTML. Hey maybe this should be a WordPress plugin eh? WINK WINK.