Dave on Facebook Follow StationaryDave on Twitter
Dave's profile on LinkedIn
My Skype Status
TechQuest: Welcome to TechQuest.
Prettifying Code Snippets on Web Pages
I've done a number of posts recently where I was showing how to do various little coding tricks. I figured out pretty early that if I just included code snippets in my html, this tricked browsers which somethings, I guess, thought it was script and didn't display it the way I expected. So I just included screenshots. Arrgh! Not helpful at all if I intended for folks to cut and paste the code for their own use.
Uploaded Image

I figured I could do a bunch of CSS and JavaScript coding and make it display the way I wanted. It seemed like a lot of work for a few code snippets. Then I discovered Google JavaScript Code Prettifier
It begins with a link to the JavaScript code Google shares for free. You can insert this link anywhere in your html document. It doesn't have to go in the head.
Then, for html or script, you need to replace the tag brackets with lesser-than and greater-than tags, so you don't confuse the browser.
Here is an example with some C-sharp code:
public static string ReadFile(string fileName)
{
    string returnString;
    using (var strReader = new StreamReader(fileName))
    {
        returnString = strReader.ReadToEnd();
        strReader.Close();
    }
    return returnString;
}

Prettifier takes care of the color coding. There are several styles you can use by adding some code to your css. Very nice. Check it out. And look for future posts of mine which contain code to be Prettified!
862 views.