PHP Recipe to Show Source-code

19 Nov

PHP programming referenceHere is a simple Web 1.5 (static HTML with a little bit of styling and JavaScript) recipe to allow a viewer of your web page to see the PHP source code of the page with a minimal amount of JavaScript and a little CSS manipulation—good for showing the work you’ve done to others. Or for embedding in your own source, in debug mode, so that teammates can see each others’ work.

See the example code at: and

The PHP and HTML

PHP has a function for this—to display a source file’s text, with the PHP code syntax colorized—hightlight_file() (or the old, more easy to remember function show_source()) .

<div id="php_source" style="display:none">
   <!--?<span class="hiddenSpellError" pre=""-->php highlight_file(__FILE__); ?>

The <div> wrapper is just a nice structure for allowing you to (CSS) style the content, if you, later, decide.  In line 2, __FILE__ is the path to the source file in which this value is referenced (relative to the code resides on the server, not the URL path).

Show/hide the Source-code

You probably do not want to display the source code by default, so we’ll hide it and provide a place for the user to click to show (or hide) the source code:

<a class="hiddenSpellError" href="#">onClick="document.getElementById( …"></a>
   <b>Click here to show|hide source</b></a>
<div id="php_source" style="display:none">
   <!--?<span class="hiddenSpellError" pre=""-->php highlight_file(__FILE__); ?>

First, in line 3, we use the style display:none to hide the source upon initial display. It’d probably be better to put this into a separate style definition.

Next, in line 1, create an <a> block for the user to click on to show and hide the source. Note that the href="#" is simply to keep the page from reloading. This can be anywhere, but keeping it just before the source-code to be displayed will keep it in a predictable place and keep it from jumping around as the text is shown and hidden.

We include an onClick attribute with a little JavaScript to do the loading and hiding via a some manipulation of the element’s display style value. Here is a clean look at the JavaScript (which should all be included in a single line in the onClick value, above):

document.getElementById('php_source').style.display =
   ? 'block'
   : 'none'

Which simply says, “If the display style for the element, php_source, is hidden (i.e., “none”), then display it (set it to “block”), otherwise hide it (set it back to “none”).


Since this is being handled via onClick, you needn’t use an <a> tag, you could use any kind of tag; but the <a> is a simple way to give user-feedback via cursor changes and highlighting.

We want to precede the source code by the selectable tag, so you can make this even more generic by not relying on a hard-coded id of the <div> element as follows:

<a href="#" onClick=" … ">
<b>Click here to show|hide source</b></a>
<div style="display:none">
<!--?<span class="hiddenSpellError" pre=""-->php
// The following simply displays the file, presumably PHP source.

The onClick code would look like: ='none'
   ? 'block'
   : 'none'

See for a working example of this approach.

You can put this at the bottom of your page for other techies to see what you’ve done.


Tags: , , , , , , , , ,

  • Mukesh Dak

    Excellent Code, Thanks a lot

%d bloggers like this: