Problem with posting HTML code on WordPress

Question

I am trying to post some source code on a WordPress.com blog. WordPress actually makes posting syntax-highlighted code quite easy--you wrap the code in a [sourcecode] block, optionally specify the language with the lang attribute, and you're good.

I've never had a problem with this before, but I recently found an issue I can't fix. I'm trying to render some source code on the blog with the following.

[sourcecode lang="html"]
<iframe src="http://someserver.edu/somescript.php?id=223"
        marginwidth="0" marginheight="0" frameborder="0" 
        scrolling="no" width="210px" height="60px"></iframe>
[/sourcecode]

When I try to preview the post, the HTML gets stripped from the [sourcecode] block. When I try to escape the < and > characters, the code block is rendered, but the raw text is shown without interpreting the encodings (so you see < instead of <, etc).

I'm guessing the original HTML is being stripped as rendering an iframe could lead to security vulnerabilities. But I don't want to render the iframe, I want to render the code behind the iframe, which should not present any security issues. How can I tell the blog to render my source code correctly?

Answer 1

One solutions that works for me is to host my code snippets on Github Gist, then you can embed the Gist into your post on Wordpress using this shortcode:

[gist *FULL LINK TO GIST*]

You can customize the embedded Gist and the instructions on how to do that are here.

Answer 2

I honestly think this is a legitimate Wordpress.com bug. I have asked for support in the official site, hoping that we either can get a workaround or if it is a real problem as I think, it gets picked up and solved.

In my assumption, these are the security measures of iframes not being allowed overlapping with the source code display feature. Funnily enough, this does not happen with scripts.

A not-so-nice workaround I have been able to find is the following:

[sourcecode lang="html"]
<iframe src="http://someserver.edu/somescript.php?id=223"
    marginwidth="0" marginheight="0" frameborder="0" 
    scrolling="no" width="210px" height="60px"></ iframe>
[/sourcecode]

(Note the space in the </ iframe> closing tag.)

I think most browsers will be forgiving enough to allow the iframe to be used like that (so, if you have public that needs just to copy and paste without technical explanations, this will still be useful), and since Wordpress cannot pickup the ending tag correctly, it won't strip your iframe out. I have tried this with the latest version of IE, FF and Chrome and they seem to pick it up nicely. However, this will not pass a HTML validation check (it will actually complain about the unclosed tag).

This is not ideal at all, but it seems to be working.