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!

I had earlier written a tutorial that gives the step by step instructions to convert a Web Form to a Web Content Form (with a defined Master Page) in an article called How to Apply a Master Page to an Existing Webpage. Since then, I have stumbled upon a GUI setting that does much of the work other shortcuts to make this an easier process.

To convert from a Web Form to Web Content Form, all of the changes will occur in the Web Form’s aspx page. Essentially, no manual changes are required in the aspx.cs or aspx.designer pages. Now, I will make a couple of assumptions. Let us assume our Web Form is called Default.aspx and our Master Page file is called Site1.Master. We have assumed very basic pages for simplicity, but the pages are listed below:

Default.aspx (Info in orange is what we want to keep)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submit" />
        <br />
        <asp:Label ID="Label2" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

Site1.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>This is our page heading!</p>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
        <p>This is our page footer!</p>
    </div>
    </form>
</body>
</html>

Now that we have defined our two pages, we begin by specifying to the Web Form where to find the Master Page. Previously, we had typed this in manually, which was prone to mistakes. Since then, I ran across a way to do this via the GUI. In the Designer mode for Default.aspx, bring up the context menu (right click) for the Document by clicking a blank space on the GUI. A recommended area is the lowest portion of the page. The resulting window should look something similar to the image to the right labeled Document Properties. Next, expand the ASP.NET and locate the property MasterPageFile. From here, we can browse and select Site1.Master page. This will append the topmost “<%@ Page” directive automatically (without mistakes) as below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" MasterPageFile="~/Site1.Master" %>

Now, the second and final step is to put items into the correct content boxes. The easiest and more error free to do this is to create a new blank Web Content Form, copy the content boxes from the Web Content Page, and paste them into our original Web Form. So right click the Site1.Master page in the Solution Explorer and select Add Content Page. Our example will output:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

Copy lines 2-5 above and paste them into Default.aspx right below the “<%@ Page” directive. The ContentPlaceHolderID called ContentPlaceHolder1 will hold all the information between <div></div> in our Default.aspx. The rest of the information below can be deleted. Therefore, our final Default.aspx will look like:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" MasterPageFile="~/Site1.Master" %>

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button2" runat="server" Text="Submit" />
    <br />
    <asp:Label ID="Label4" runat="server"></asp:Label>
</asp:Content>

The information in orange again matches the information from the original Web Form that we wanted to keep. Finally, to confirm the process has gone smoothly, switch back to the Designer mode and insure that the Master Page content shows up (though grayed out). This sums of the process of converting a Web Form to a Web Content Form. Though this process still requires manual editing and is a per page process, it is substantially easier than the previous method. A step by step overview is:

1. Create a Master Page
2. Apply Master Page via GUI in Default.aspx
3. Copy over the Content Containers
4. In your Web Form, move Web Controls and information into the proper Content Containers.

About a couple of weeks ago, I covered the basics on how to Access PHP Class Variables and Methods. This article is different because it deals with only the creation of a static method. Before we continue, we will insure we know the difference between a non-static class method and a static method.

The real world example of the differences between a non static method and static method can be an old full sized computer tower. In the static method point of view, assume you only want to use the computer tower as a foot rest when you sit at your desk. For this, you do not need to turn on the computer (create a class object). This does not require you to load you operating system (no instantiating of class variables required). But, you can still kick up your feet. However, because you did not turn on your computer, you will be unable to access non-static methods (can only call on static method methods).

In the non-static method point of view, if you want the operation system, you would need to turn on the computer (create class object). What this does is load your operating system (instantiate class variables) so you can finally login to your computer (method of the class). Additionally, with the computer on, we can still kick our feet on the tower (can call both static and non static function).

Now how do we create a function with static methods in PHP? When we write the static method, we must use the keyword static. This method we create will always return true and is created in the common class.

class common {
   public static function myStaticFunction()
   {
      return true;
   }
}

Now that we have created the static function, we can call on the static method with the following snippet of code. The first term “common” is the name of the class. This is followed by two colons (::) followed by the method name.

$value = common::myStaticFunction();

And there we have it! We have successfully created and used our static method. To see the official PHP article on static, go to http://www.php.net/manual/en/language.oop5.static.php.