[Plugin: Developer Formatter] W3C Validating pages with devformatter content

I recently tried to validate my pages with devformatter content and was getting a long list of errors. I ended up making the following changes to get validation working with XHTML Transitional. Perhaps these or equivalent could be integrated into the next release? No hurry, it’s currently working for me. However, if it could be patched so that it will continue to work after the next update, that would be great.

You can see the code changes working at this post — which talks about this code. You can even use the Copy to Clipboard feature with this very code.

Anyway, there were four things that the validator did not like about the plugin output:

1. The Javascript script tags used language=”Javascript” and did not include type=”text/javascript”.
2. The flash (for the clipboard) used embed, which is a Netscape proprietary extension.
3. WordPress automatically adds paragraph tags and either the code block was in a paragraph with other content or it was in its own paragraph. Unfortunately, pre is not a valid child of p, so the validator barfs.
4. Even if I strip the paragraph tags, the pre contains a table. Again, table is not a valid child of pre.

I added the type to the script tags, e.g.

echo "<script language=\"JavaScript\" type=\"text/javascript\"><!--\n var DevFmtUrl='".DEVFMT_URL."'; //-->\n</script>\n";

I changed the embed to an object:

'background-position:50% 50%;width:16px;height:16px;vertical-align:middle;">' . "\n" . '<object id="ZeroClipboard'.$DevFmt_CodeIndex.'"
type="application/x-shockwave-flash" data="'.
        DEVFMT_URL.'_zclipboard.swf" width="16" height="16" style="vertical-align:middle">'.
        '<param name="movie" value="'.
        DEVFMT_URL.'_zclipboard.swf" />'.
        '<param name="FlashVars" value="id='.$DevFmt_CodeIndex.'&width=16&height=16" />'.
        '<param name="wmode" value="transparent" />'.
        '<param name="loop" value="false" />'.
        '<param name="menu" value="false" />'.
        '<param name="quality" value="best" />'.
        '<param name="allowFullScreen" value="false" />'.
        '<param name="allowScriptAccess" value="always" />'.
        '</object>' . "\n" . '</td>'.

I changed the pre to a div:

return $regionflag[0].'<div class="devcodeblock" title="'.devfmt_getLangTitle($ALang).'">'.
        $Toolbar.'<div class="devcodeoverflow"'.$AStyle.'>'.$ACode.'</div></div>'.$regionflag[1];

In devfmt_ContentFormat, I added three new lines, just before the content is returned:

$AContent = str_replace('<!--DEVFMTCODE-->', '</p><!--DEVFMTCODE-->', $AContent);
      $AContent = str_replace('<!--END_DEVFMTCODE-->', '<!--END_DEVFMTCODE--><p>', $AContent);
      $AContent = str_replace('<p></p>', '', $AContent);

Finally, in devfmt_common.js, I changed the embed selector to an object instead:

EmbedObj = jQuery("object#ZeroClipboard" + id)[0];

With these changes, I am now able to validate my page as XHTML Transitional with the W3C HTML Validator. If I took off the language=”JavaScript”, removed target=”_blank” from all my links, and updated my DOCTYPE, I could validate as XHTML Strict.