Victor’s Programming Aid

You may have noticed the fancing code snippets that accompany many of the tutorials on this website! I would love to say I developed this myself, but the truth is that this is a free resource free for anybody to download and use. It is called SyntaxHighlighter and can be found at http://code.google.com/p/syntaxhighlighter/.

What is Included?

So what does the Syntax Highlighter come with? Below is a list my favorite features of this software:

1. It’s completely free!
2. Associate keywords for supported languages are highlighted.
3. Each line of code is numbered and colored for easier reading!
4. Allows one click to code only view.
5. Allows one click copy to clipboard of code.
6. Allows one click copy to printer.

What Comes With the Download

The file can be downloaded from their official website at http://code.google.com/p/syntaxhighlighter/ as a rar compressed file. Inside the compressed file, you will find various folders and files. The core files that are required include:

1. clipboard.swf
2. shCore.js
3. SyntaxHighlighter.css

Still, there are many more JavaScript files that have been included in the download. Not all of these files are required. Instead, you choose additional optional JavaScript files for the programming or scripting languages you want the Syntax Highlighter to associate.

Installation After Uploading Files

After you have uploaded the required and accompanying optional files, you will need to include the javascript and css files to the header of the pages with which you plan on using the Syntax Highlighter. See the example below:

<link type="text/css" rel="stylesheet" href="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript">
  window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://www.victorchen.info/wp-includes/js/SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
  }
</script>

In the above, there Line 1 includes the CSS file. Next, Line 2 includes the one core JavaScript file. Lines 4 through 8 include optional JavaScript files. Lines 9 through 14 include setup for using Syntax Highlighter. The portion requires including the clipboard.swf file.

Usage

I assume you already have formatted code contained within the pre tags, as found in a previous tutorial called 3 Steps to Posting Sample Code on your Website. As of now, all you have is a formatted tag, without the fancy upgrades. All you need to add for fancy code formatting is to add name=”code” class=”html”. Exchange html with the type of file you have included. Click to see sample supported files: http://code.google.com/p/syntaxhighlighter/wiki/Languages. An example:

<pre name="code" class="html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Victor's Programming Aid&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

Conclusion

With that, you now have fancy code formatting on your website. Comment on some examples of where you have used the Syntax Highlighter in action!

On a web page form, one method to accept user input is with a single line text field. This allows for a visitor the freedom to input anything. But what if you want to give the visitor a set of options to choose from in addition to the freedom of inputting anything? That is what is commonly known as a auto complete text field. As a visitor types into the auto complete text field, a list of selectable options (similar to a drop down list) will appear. This method is similar, but not the same as a Combo Box.

The best way to create an auto complete text field is with JavaScript. There are many various websites out on the internet that offer an solution. My personal favorite script to use is one created by zichun called Auto Complete Control. Of the many controls I tries, I like this for the following reasons:

• It is free and use and download licensed under the Creative Common License
• It is easy to implement only requiring adding two JavaScript scrips
• Allows for many auto complete text field instances per page, each with many editable tweaks
• The auto complete options quickly appear as the visitor types

The JavaScript files can be downloaded as a single zip file from their official website at http://www.codeproject.com/KB/scripting/jsactb.aspx. As of the writing of this tutorial, the two required files are common.js and actb.js. [More]

To generate a random number between 0 and X, use the below javascript:

var myRandomNumber = Math.floor(Math.random()*(X+1))

Therefore, if you want from 0 and 100, you simply need:

var myRandomNumber = Math.floor(Math.random()*101)

Now, a bit more complicated! If we want a number between the range of X and Y, follow the below formula:

var myRandomNumber = Math.floor(Math.random()*(Y-X))+X

And another real world example. Assume we want a random number from 79 and 473:

var myRandomNumber = Math.floor(Math.random()*394)+79