Show HTML Source Code (a.k.a. middleFinger)
This class can show highlighted HTML source of the current web page.
It can generate highlighted HTML source code using PHP form the current page. It calls a script that will use the PHP class to retrieve the page HTML source and output it in a user-friendly fashion on the end-users web browser using JavaScript.
This project also includes a replacement context menu (right click). This context menu also supports keyboard shortcuts using JavaScript keyboard event triggers.
The following is a list of features this project comes packaged with.
- CSS style-sheets for easy customization.
- A replacement context menu to replace the browser's default right click menu.
- Context menu comes with optional sub menus for better organization.
- Keyboard shortcuts. (e.g. Ctrl + U; View Source, BKSP; go back to the previous web page)
- An example page (index.htm) for an easy quick-start.
- The output source code is also generated with line numbers.
| Key | Keyboard Shortcuts | Keyboard Event Description |
|---|---|---|
| Backspace | Bksp or Alt + < |
Goes back one page in the browser history. |
| Shift + Backspace | Shift + Bksp or Alt + > |
Goes forward one page in the browser history. |
| F5 | F5 or Ctrl + R |
Refreshes the current page. |
| Control + P | Ctrl + P |
Opens the Print Page dialogue screen. |
| Control + U | Ctrl + U |
Views the source code of the current page. |
| Control + X | Ctrl + X |
Closes the source code window element. |
| Home | Home |
Scrolls to the top of the page. |
| End | End |
Jumps to the bottom of the page. |
| ArrowUp | Up Arrow |
Scrolls the page up a little bit. |
| ArrowDown | Down Arrow |
Scrolls the page down a little bit. |
| PageUp | PgUp |
Scrolls the page up a lot more. |
| PageDown | PgDn |
Scrolls the page down a lot more. |
| ContextMenu | Context Menu |
Opens and/or closes the context menu element. |
| Escape | Esc |
Closes the context menu element if it's visible. |
The following is a list of demo content for your viewing pleasure. This way you can see what this package has before you download it.
- Example Page - An example page showing the implementation of the context menu and the show source functionality.
- Context Menu (Right Click) - The right click menu looks similar to this.
- Code Block Snippet - The output source code looks similar to this.
- PortableAppz.x10.mx/ - This website uses this package. Visit to see it in action on a live website.
Context Menu (Right Click) Screenshot:
Generated Source Code Output Screenshot:
- PHP 5+ on UNIX, Mac OS X, or Windows with Apache server (or something similar).
- Some CSS and HTML knowledge required for customizing.
- PHP and JavaScript knowledge required for advance customization.
The following is a few awards or acknowledgements this project has won.
"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 (PHPClasses.org Founder/Webmaster)
- Innovation Award - Nominated for an Innovation Award at PHPClasses.org and won 2nd place on June 2017.
- This project and the code therein is released under the GNU GPL-3.0.