PHP Classes

PHP Show HTML Source Code: Show highlighted HTML source of the current page

Recommend this page to a friend!
     
  Info   Example   Screenshots   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 46%Total: 261 All time: 7,803 This week: 488Up
Version License PHP version Categories
showsource 1.13GNU General Publi...5HTML, PHP 5
Description 

Author

Devin Gaul

This class can show highlighted HTML source of the current page.

It can generate HTML with JavaScript for the current page that calls a script that will use the class to retrieve the page HTML and output it highlighted when using the page context menu.

Innovation Award
PHP Programming Innovation award nominee
June 2017
Number 2

Prize: One downloadable copy of Komodo IDE		 Often Web developers want to take a look at Web pages source code but usually browsers show it in a way that it is hard to read.

This class provides means to show the current page source code by highlighting the tags and data.

Manuel Lemos
Picture of Devin Gaul
  Performance   Level  
Name: Devin Gaul <contact>
Classes: 1 package by
Country: United States United States

Level 1 Star

 Innovation award
Innovation award
Nominee: 1x

Example

<?php header("Content-Type: text/javascript");

include(dirname(__FILE__) . '/components/showsource.class.php');

$vs = new showsource();

if (!($vs instanceof showsource)) {
    echo '[ShowSource] ShowSource class was not found.';
    return false;
}

$vs->setHost('softables.tk/')

?>

css=document.body.appendChild(document.createElement("link"));
css.id="showSourceCSS";
css.rel="stylesheet";
css.href="<?php echo $vs->cssPath; ?>/showSource.css";
css.type="text/css";

m=document.body.appendChild(document.createElement("figure"));
m.id = "mSourceWindow";

<?php

$p = $_GET['p'];
if($p == "") {
    $p = "http://".$vs->getHost()."/";
    echo("alert(\"No page specified! usage:Source.php?p=http://www.example.com/\")");
    return false;
}

$contents = "";

$contents = $vs->readFile($p);

?>
m.innerHTML=`<?php echo $vs->source($contents, $p, false); ?>`;


function closeSourceWindow(){
    document.body.removeChild(document.getElementById("mSourceWindow"));
    document.body.removeChild(document.getElementById("showSourceCSS"));
}

  (function() {
      for (var tags = ['figure', 'figcaption'], i = 0; i < tags.length; i++) {
        document.createElement(tags[i]);
      }
    })();

    (function() {
      //filter IE8 and earlier which don't support the generated content
      if (typeof(window.getComputedStyle) == 'undefined') {
        return;
      }

      //get the collection of PRE elements
      var pre = document.getElementsByTagName('pre');

      //now iterate through the collection
      for (var len = pre.length, i = 0; i < len; i++) {
        //get the CODE or SAMP element inside it,
        //or just in case there isn't one, continue to the next PRE
        var code = pre[i].getElementsByTagName('code').item(0);
        if (!code) {
          code = pre[i].getElementsByTagName('samp').item(0);
          if (!code) {
            continue;
          }
        }

        //create a containing DIV column (but don't append it yet)
        //including aria-hidden so that ATs don't read the numbers
        var column = document.createElement('div');
        column.setAttribute('aria-hidden', 'true');
        column.setAttribute('class', 'numbers');

        //split the code by line-breaks to count the number of lines
        //then for each line, add an empty span inside the column
        for (var n = 0; n < code.innerHTML.split(/[\n\r]/g).length; n++) {
          column.appendChild(document.createElement('span'));
        }

        //now append the populated column before the code element
        pre[i].insertBefore(column, code);

        //finally add an identifying class to the PRE to trigger the extra CSS
        pre[i].className = 'line-numbers';
      }

    })();

Screenshots (2)  
  • screenshots/screenshot-01.png
  • screenshots/screenshot-02.png
  Files folder image Files (9)  
File Role Description
Files folder imageassets (2 directories)
Files folder imagecomponents (1 file)
Accessible without login Plain text file index.htm Data Example usage
Accessible without login Plain text file Source.php Example Handles the main execution.

  Files folder image Files (9)  /  assets  
File Role Description
Files folder imagecss (2 files)
Files folder imagejs (2 files)

  Files folder image Files (9)  /  assets  /  css  
File Role Description
  Accessible without login Plain text file middlefinger.css Appl. Stylesheet for the context menu
  Accessible without login Plain text file showSource.css Appl. Stylesheet for the source code and highlight

  Files folder image Files (9)  /  assets  /  js  
File Role Description
  Accessible without login Plain text file middlefinger.jquery.js Data Optional jQuery file to use instead of original js file
  Accessible without login Plain text file middlefinger.js Data JavaScript file for the context menu

  Files folder image Files (9)  /  components  
File Role Description
  Plain text file showsource.class.php Class The brain of the source code output.

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
Downloadshowsource-2017-09-09.zip 205KB
Downloadshowsource-2017-09-09.tar.gz 204KB
Install with ComposerInstall with Composer
 Version Control Unique User Downloads Download Rankings  
 0%
Total:261
This week:0
All time:7,803
This week:488Up
User Ratings User Comments (1)
 All time
Utility:68%StarStarStarStar
Consistency:68%StarStarStarStar
Documentation:-
Examples:56%StarStarStar
Tests:-
Videos:-
Overall:46%StarStarStar
Rank:3146
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Related pages  
An example for the context menu.
An example of the view source output.
An example page showing the implementation of both the context menu and the show source functionality.
The GitHub project page.
Website that utilizes this package.