How to use Google Code Prettify with BlogEngine.Net

Simple code coloring with this javascript library

From here on out you will notice that the code on my site will be formatted differently, and you won't know this, but it will be much easier for me to publish code. This is because I have implemented the google-code-prettify library which is freely available... and it is great! Getting it to work with BlogEngine is not too much of a hassle either; this is how I did it (there are unlimited ways to implement this, where to dave the files, etc.; this is just how I chose to).

place the files in a central location

I put mine in the root/js/ folder, just in case multiple themes were going to access it.

reference them from your site.master

I ended up putting this in the code-behind of my site.master as a precaution of where this file might (if ever) move in the future when I completely forgot how I did this. The nice thing about this is that it doesn't matter the relation to the JS, as it will always be found as long as the JS itself does not move.

site.master.cs
Page.ClientScript.RegisterClientScriptInclude(
  typeof(site), "jquery",
  ResolveUrl("~/js/prettify.js"));
Page.ClientScript.RegisterClientScriptInclude(
  typeof(site), "jquery", 
  ResolveUrl("~/js/lang-css.js"));
Page.ClientScript.RegisterClientScriptInclude(
  typeof(site), "jquery", 
  ResolveUrl("~/js/lang-sql.js"));

If you noticed, I did not load all the language JS files included in the download, that is because I don't plan on using them, but feel free if you are a lisp, vb, etc. developer.

reference your css

Now this I am referencing simply from the site.master itself. I placed the prettify.css file in the theme/naspinski/ directory of my site.

site.master

<link rel="Stylesheet" type="text/css" href="prettify.css" />

The reason I am not doing this in any sort of global way is the fact that different themes will likely want different prettify.css files. I will have to make sure there is a prettify.css file for each theme.

call the prettyPrint() method

Now simply call it with your 'body onload' (or jQuery, MooTools, Prototype, etc.).

site.master

<body onload="prettyPrint()" />


use it

Now that everything is all set up, you just need to put your code inside of some <pre> tags calling the required classes:

this code:

<pre class="prettyprint">
  List<Person> p2 = new List<Person>()
  {
    new Person(){Name = "A", City="New York", Id=100},
    new Person(){Name = "B", Id=101, State="WA"}
  };
</pre>


looks like:
List<Person> p2 = new List<Person>()
{
  new Person(){Name = "A", City="New York", Id=100},
  new Person(){Name = "B", Id=101, State="WA"}
};

**IMPORTANT**
Now, I noticed that the BlogEngine RTE liked to strip out line-breaks inside the <pre> tags so you will have to add the <br />s in there to break lines which you would normally not have to do, as well as any starting spaces with &nbsp;s. I noticed if I turned off JS while entering my post, that I did not have to do this; so I actually prefer to *not* use the rich text editor so I don't have to add the <br />s.

Now, if you look back up you see I specifically pulled a couple language scripts for use with SQL and CSS. The script as is will try to 'guess' the language you are using, but if you want to specify it you simply add it in the class declaration:

this code:

<pre class="prettyprint lang-sql">
CREATE TABLE dbo.person (
person_id INT NOT NULL PRIMARY KEY IDENTITY,
first_name VARCHAR(50) NOT NULL,
last_name VARCHAR(50) NOT NULL,
age INT NOT NULL
);
</pre>


looks like:
CREATE TABLE dbo.person (
person_id INT NOT NULL PRIMARY KEY IDENTITY,
first_name VARCHAR(50) NOT NULL,
last_name VARCHAR(50) NOT NULL,
age INT NOT NULL
);                

this code:

<pre class="prettyprint lang-css">
.code .comm { color:#444444; }
.code .var { color:#800000; }
.code .num { color:#0033CC; }
</pre>


looks like:
.code .comm { color:#444444; }
.code .var { color:#800000; }
.code .num { color:#0033CC; }        


And that's that. I use a customized prettify.css file that I made, so your results will be a bit different - if anyone wants it, just let me know.

Shout it kick it on DotNetKicks.com

Comments (7) -

  • Hey thanks, this was really useful. Used it on our blog.
  • Max
    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful and beneficial to your readers.
  • great post, thanks for taking the time to sharing this tips with us
  • Ah the mysteries of color removed - thanks now I can start to make my blog look like I want it to!   Thanks  Max
  • Its a great website Thanks
  • "so I actually prefer to *not* use the rich text editor so I don't have to add the <br />s." - common problem.  Most of these WYSIWYG inline editors do too much, editing the inserted comments.  I edit my sites with this switched off - slightly harder but with much more control.
  • Hey max, something wrong in the below section:
    <pre class="prettyprint lang-css">
    .code .comm { color:#444444; }
    .code .var { color:#800000; }
    .code .num { color:#0033CC; }
    </pre>
    I cannot able to insert this code in my PHP site. Let me know whether it will support to Linux server or not.
    thanks.
    By the way i am very new to coding. Starting learning topics Smile
Comments are closed