Computers / Programming / Projects / Website / Website - Code Viewer

Overview

A major part of this site is devoted to programming. It’s my profession as well as my hobby so it ends up being something I spend a lot of time doing and when I create something I want to show it off. To that end while doing writings for some code last year I decided I needed a code viewer. I wanted something that would format the code and add highlighting to make it appear as it would in a code editor. This made the code look better and it’s also easier to read.

File not found: example/viewcode.php

The script starts by loading information about the language (Or the defined base language if different from the file type). It also does some setup to determine if the given file is allowed to be displayed and adds some information about the file at the top of the page. It then sets up the code table with a header cell displaying the full address of the file. Under the header cell the table has two columns, one for the line number and one for the line content. It loops through the characters of the file line by line comparing them against various patterns to determine how they should be displayed. While processing a character the general process is to test for start of a language, test for end of a language, test for the start of a state, tests for a pattern in a set, tests for the end of a state, test for numbers to highlight if language does so, and finally it will just display the character if it hasn’t already been printed by one of the other steps. The actual action the code viewer takes when it finds a pattern depends on which class the pattern belongs to and the defined options of that class. For example of the pattern is from a set it may check to see that the character before and after the pattern aren’t alphanumeric and then put a span around the pattern with a class equal to the set’s defined colour. If the pattern is from a lang it might load the settings for that language and if the colour is set to “~inlang” it will let the new language handle the highlighting.

File not found: example/viewcodeClasses.php

This script contains the classes used by the main view code script to hold information. it defines a class for languages, states, sets, and line numbers.

File not found: example/viewcodeHelpers.php

This script contains helper functions used by the main view code script. These functions are primarily used to find and compare strings.

Types

These files define the languages that can be used by the code viewer. They are read as needed during the processing of pages and define various aspects of a language. The “langs” section defines inter-language relations. These are ways in which a file in one language can start and end sections of another language. The “states” section defines sections in a language. These are the parts of a language that get highlighted and processed in different ways. The “sets” section defines patterns in a language. These are words or symbols that get highlighted when in specific states.

File not found: example/types/c.xml

The C programming language

File not found: example/types/cpp.xml

The C++ programming language

File not found: example/types/cs.xml

The C# programming language

File not found: example/types/css.xml

The CSS style sheet language

File not found: example/types/html.xml

The HTML markup language

File not found: example/types/java.xml

The Java programming language

File not found: example/types/js.xml

The JavaScript programming language

File not found: example/types/php.xml

The php server-side scripting language

File not found: example/types/vb.xml

The Visual Basic (.net) programming language

File not found: example/types/xml.xml

The XML markup language

File not found: example/types/xaml.xml

The XAML markup language

Examples

langInLang.html

html type icon
Type: Example File
Language: HTML/CSS/JS
langInLang.html
Link: langInLang.html

This page is an example of the inter-language abilities of the code viewer. It defines a simple HTML page with a style and a script element that get processed using CSS and JavaScript respectively.

langInLang2.php

php type icon
Type: Example File
Language: PHP/HTML/CSS/JS
langInLang2.php
Link: langInLang2.php

This file shows a similar example but with php added as well. Note how the php can even be started from within the JavaScript as the language list is kept when loading a new type.