|
|
|
|
| 1 |
Welcome to the Source Viewer. |
| 2 |
|
| 3 |
I created this script specifically to display code samples on my portfolio website. |
| 4 |
It serves the function of allowing users to view the Javascript, CSS, and source HTML |
| 5 |
for all of the projects I have posted. |
| 6 |
|
| 7 |
The source viewer is a PHP script that can open any local file (with proper read permissions) |
| 8 |
on the server where it resides, or any URL. It then generates the necessary HTML to display |
| 9 |
the file as you see here with line numbers, syntax highlighting (for PHP, HTML, Javascript, |
| 10 |
and CSS), as well as auto-detection of function names and CSS Rules which are displayed in a |
| 11 |
drop down menu in the top toolbar while viewing a PHP, Javascript or CSS file. |
| 12 |
|
| 13 |
The source viewer also provides you with an easy way to jump to any line in the document and, |
| 14 |
if the functions or CSS rules have been auto-detected, you can jump to each of those by |
| 15 |
selecting them from the drop-down menu. Additionally, you can hide comments present in the |
| 16 |
document such as the one below: |
| 17 |
|
| 18 |
|
| 19 |
|
| 20 |
|
| 21 |
In most portfolio items there are a series of links at the bottom of the describe panel titled |
| 22 |
"Source Links". These links allow you to easily view the CSS, Javascript and HTML that make up |
| 23 |
the portfolio item you are viewing. For example, if you are viewing this page at the URL: |
| 24 |
http://www.ianowhite.com/describe/source, then you should see a dark, translucent, hovering |
| 25 |
panel on the top, left corner of the page. Clicking on any of the "Source Files" at the bottom |
| 26 |
of this panel will allow you to view source of the various files that define this page. |
