RSS
 

PHP Recipe to Show Source-code

19 Nov

PHP source-code display recipeHere 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, behind it, 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: http://cachecrew.com/sample_code/highlight_file.php and http://cachecrew.com//sample_code/highlight_file2.php.

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()) .

[php]
<div id="php_source">
<?php highlight_file(__FILE__); ?>
</div>
[/php]

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 absolute path to the source file of the source content (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:

[html]
<a href="#" onClick="document.getElementById( …">
<b>Click here to show|hide source</b></a>
<div id="php_source" style="display:none">
<?php highlight_file(__FILE__); ?>
</div>
[/html]

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, rather than hard-code it in the element.

In line 1, an <a> block allows the user to click to show and hide the source. The href="#" is simply to keep the page from reloading. This can be anywhere, but keeping it just before the displayed source-code will keep it in a predictable location—if it were at the bottom, it’d jump around as the text is shown and hidden.

We set onClick with a little JavaScript to do the loading and hiding by manipulating the element’s display style. Here is a clean look at the JavaScript (which should all be included in a single line in the onClick value, above):

[js]
document.getElementById(‘php_source’).style.display =
document.getElementById(‘php_source’).style.display==’none’
? ‘block’
: ‘none’
[/js]

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”).

Notes

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:

[html]
<a href="#" onClick=" … ">
<b>Click here to show|hide source</b></a>
</pre>
<pre><div style="display:none">
<?php // The following simply displays the file, presumably PHP source.
highlight_file(__FILE__); ?>
</div>
[/html]

The onClick code would look like:

[js]
this.nextElementSibling.style.display =
this.nextElementSibling.style.display==’none’
? ‘block’
: ‘none’
[/js]

See http://cachecrew.com//sample_code/highlight_file2.php 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: , , , , , , , , ,

 
%d bloggers like this: