PHP Code Not Displayed in Browser
Recently a reader sent in a bug report about this post on bbPress. For some reason the PHP code snippets were not displaying properly in the browser. Basically, instead of looking neat and tidy as always, the code looked like a garbled mess of spaced-out nonsense. And by “spaced out” I don’t mean in a good way: there was literally like 100px of vertical space breaking up the jumbled lines of code. It was definitely a mess, so I began to investigate.
I tested on many browsers on Mac and Windows. Have not yet tested on Linux. From what I can tell, the broken PHP code happens only in Waterfox running on Windows. All other browsers currently display PHP code snippets correctly.
This issue may or may not surface in other browsers, so this post is just FYI and for future reference. Hopefully it helps someone figure out why PHP code is not displayed, broken or whatever. In this case, simple logic suggests the underlying issue is with Windows, not Waterfox.
Here are a couple of screenshots to illustrate the problem. The first shows the PHP code looking fine; the second shows it all distorted. Click each thumbnail to view full-size image (opens new tab).
In the second screenshot, you can see the broken code snippet, scattered all over the place. With massive intra-code line spacing and chunks of code displayed outside of the enclosing
<pre> element (red arrow).
Closer inspection reveals the underlying issue. Waterfox on PC/Win has a bug with code escaping. Odd, because there is no bug with Waterfox on Mac. Specifically, Waterfox has two issues with displaying proper HTML:
- Character encoding — Contents of
<code>tags are not escaped/displayed properly on the page (e.g., angle brackets
- PHP tags — Opening and closing PHP tags are commented out via HTML comments (i.e.,
?>are replaced with
So not all PHP code is affected; it’s a very limited test case. From what I can tell, there are two scenarios where Waterfox/Win chokes on displaying PHP code:
- If the
<pre>tag includes PHP tags, the PHP code will not be displayed
- If the
<pre>tag includes HTML mixed in with the PHP, the PHP code will not be displayed, and the HTML will display all jumbled and broken
Here are a couple of screenshots to give you a better idea of what’s happening in the source code. The first screenshot shows the code displayed properly. The second shows the commented-out PHP tags, and resulting broken code.
Admittedly, this is a relatively minor issue. But for code-driven tutorial sites like Perishable Press, it’s important that browsers display code content correctly. Imagine the horror of some newbie trying to following along with the tutorial using the Waterfox browser, and then trying to make sense of that jumbled mess of garbled gibberish. Confusion and frustration on the house.
One might imagine commenting out opening and closing PHP tags as some sort of security feature, but in reality it is a potential security risk.
Disabling PHP tags breaks proper HTML output. It leaves code samples broken. Broken code that may be used on a live site. And as we all know, broken code can introduce bugs and security issues.
Also, disabling PHP code in HTML content at the browser level accomplishes nothing. Doing so is pointless at best, and a security risk at worst. Why? Because browsers do not (and cannot) execute PHP scripts. It is foolish to disable them.
Other reasons for broken code display
If you are in the same boat, trying to figure out why your PHP snippets are not working, and Waterfox is not the issue, here are some other things to look at.
- CMS like WordPress filtering or sanitizing certain characters
- Visiting the page via proxy/VPN service can modify page markup
- Browser extensions that interact with web page content
- Incorrect HTML structure/format et al
I hope it helps. As always comments and feedback welcome :)
This be a good reason that I have become very practiced in using the PHP function “htmlspecialchars()” for printing out code blocks:
I make VERY heavy use of it in my own output-handling projects.
Another possible situation: Perhaps the affected browser(s) has a “bug” in one or more of the CSS-properties concerning the container HTML? I have seen something like this a few times with FireFox. This was especially the case when I could not get the positioning properties (like “top, left, etc.”) to work on DIV’s, SPAN’s, etc. after declaring a doctype in the document header. Thankfully the issue was finally fixed AFTER waiting through at least THREE versions!