Grow your CSS skills. Land your dream job.

How I Think Posting HTML In Comments Should Work

Published by Chris Coyier

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.

Comments

  1. Honestly, more than anything I would just prefer to have the ability to edit my comment and correct any mistakes that I may have made. That said, I’m a huge fan of markdown, and love being able to use characters like backticks to call out a piece of code (usually a variable, class, or html tag) inline as well as for multi-line code blocks.

  2. Dj
    Permalink to comment#

    So… Chris… when can we expect to see this implemented on this site?? (This new styling is great, by the way.)

  3. I’ve also been thinking about.. when you paste, can you see that there is multiline paste content with extra whitespace and automatically treat that as a code block?

  4. Hi,

    Shouldn’t there be some basic generators on the net to do this ? Just throw in the HTML you wan’t to display as code and get it back? Not the plugin stuff you can use to highlight but just some generator.

    Anyways, thanks for the insight on this. Sometimes it can be really frustrating to show code :-).

    Greetzz

  5. Classic example just happened on another post just minutes ago: http://cl.ly/9QJ2

  6. Hassan
    Permalink to comment#

    Here’s what I’ve got for the first problem.

    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] );
    }

    One problem though, allowed tags inside escaped tags are not escaped. The RegEx should be fixed, and I don’t know how! :)

    Also note that I’m using the get_comment_text filter, which is non-destructive and doesn’t change the data in the database.

  7. I have been guilty of this, and have written some comments of this blog that have had to be edited (apologies for that).

    When I started writing articles myself though, I decided to make an html entity encoder which can be used to copy/paste or write code into (there are many already, but obviously this is my favourite way to do it).

    Also, this comment preview is a great idea!

  8. I prefer to imbed (or link to) GitHub gists. Maybe you could parse out those links (and other popular ones) and convert them to imbedded blocks. You see this on twitter’s website.

  9. Permalink to comment#

    Ooh, I like your new comment preview. I had tried at one point to find a suitable comment preview script/plugin for my site, but couldn’t find one. I tested out the one that James Padolsey uses, but I found it had a few problems. Can’t even remember what problems. Something related to multi-line code blocks I believe.

    Are you using this plugin?

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

    If so, I may try that out, thanks!

    • Khalid
      Permalink to comment#

      I found the following ID in the markup: div-comment-lcp. The last part (lcp) might be a shorthand for Live Comment Preview, which is the plugin you mentioned.

  10. Permalink to comment#

    Part of the solution I’m using on my forum is real-time previews, as I see you have here. That more than anything else helps put my mind at ease when making posts/comments, and removes a lot of the need for an Edit function.

    I’m also using Markdown, or rather a client-side version called Showdown (the original page for which seems to have disappeared). The upshot of this is that forum posts get stored on the server exactly as the user entered them, and presentational transformations to HTML are done client-side.

    Obviously this won’t work with JS disabled, but since my forum relies so fundamentally on JS to work anyway, I didn’t consider this a big deal. Should I make a non-JS version it could just present the Markdown-encoded posts as-is, since Markdown is pretty unobtrusive.

    • Sounds like you may be relying a bit too heavily on Javascript for input santitization there, with Forum posts being stored on the server exactly as they’ve been entered.

      If it’s not already in place I’d be using some server-side code to sanitize the data before saving it to the server.

  11. Dave
    Permalink to comment#

    I encountered this dilemma myself not too long ago. I decided to try my hand at writing my own website, from scratch, partly as a learning tool and partly as it would allow me to be very specific about what people can and can’t do.

    In the end, I found the easiest solution was to escape all HTML, and allow the use of BBCode for simple stuff like text formatting, inserting code blocks, etc.

    For me, the logic involved in working out what HTML should be escaped and what should be kept was too difficult, especially when it comes to inserting code sections and stuff in the middle of a comment.

    • Dave
      Permalink to comment#

      Oh, and of course it doesn’t require a user (or myself) to do any escaping manually, as there is a clear distinction between the stuff the site must escape (HTML) and the stuff it should keep and subsequently convert to HTML (BBCode).

  12. Nice article about the commenting. I think the content will help me to comment more in the future. Thanx!

  13. Excelente resource… This was help to me.

  14. The latest version of wordpress is doing this already (without the need to convert the less than sign), but how difficult would it be to give your commentators a simple editor.

  15. Permalink to comment#

    Excellent write up as usual…
    Thanks for sharing this information..

  16. I really like the way that stackoverflow handles how you input code.

  17. I like the technique used in WordPress.org’s forums where back ticks (`) are used to surround code, be they inline or multiline.

    A filter & regular express can be used to change < into &lt;, etc before allowed tags are checked.

    It still requires instructions but they’re simplified to cover both use cases.

  18. Knowing what method to use is the problem I have all over the web without an ugly kitchen sink type toolbar I never know where I can use Markdown or what HTML can actually be used etc…

    Chris might be cool to add a tooltip type thing to the “You can use basic HTML” explaining what basic HTML is.

    Oh, and Ajax edit comments is a cool plugin…

  19. Definitely +1 for being able to edit my comments.

  20. Very nice!
    Thanks for sharing this information..

  21. Lol, I’m so happy Chris made this post. I embarrassed my self the other day with a very half assed comment when I tried to demonstrate something via HTML and my code came out all botched up. Not even an alien would have been able to figure out my message, needless to say I was pretty pissed off about that lol.

    Allow me to edit my comment, kthxbye. ;)

  22. Personally I find it a bit tacky to use someone else’s site for your SEO, if you must link to something of your own it should contribute to the conversation, e.g. a blog post you wrote on the subject. Otherwise you’re just spamming IMO.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".