Content Management Web Log

Go Back

Syntax highlighting with Google Prettyprint

I have a lot of code samples in c#, css, html, javascript, sql, xml and xslt that will look much better with colour syntax highlighting.

Google pretty print makes this simple, all you need to do is

  • wrap your code sample in <pre> tags
  • add a class="prettyprint"
  • optionally add a lang-xyz class to indicate the language
  • add the prettify.css stylesheet
  • add the prettify.js scripts
  • call the prettyprint function in your page load


    <link href="/css/prettify.css" rel="stylesheet" type="text/css" />
    <script src="/js/prettify.js"  type="text/javascript"></script>
    <script src="/js/lang-sql.js"  type="text/javascript"></script>
    <script src="/js/lang-vb.js"  type="text/javascript"></script>
    <script src="/js/lang-css.js" type="text/javascript"></script>

<script type="text/javascript">

    jQuery(function () {
       // google-code-prettify
       // lang-htm, lang-html, lang-cs, lang-js, lang-xhtml,
       // lang-xml, lang-xsl, lang-css, lang-sql and lang-vb
  • Facebook
  • Twitter
  • DZone It!
  • Digg It!
  • StumbleUpon
  • Technorati
  • NewsVine
  • Reddit
  • Blinklist
  • Add diigo bookmark
Post a comment!
  1. Formatting options
  2. Captcha image

Created: Thursday 20th May 2010 3:52 PM
Last Modified: Friday 23rd July 2010 6:35 PM LinkedIn link: View Chris Mills' profile on LinkedIn
Valid XHTML 1.0! Valid CSS! Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

Where's the Blog Calendar and Tag List?

Telerik Blog controls for Calendar and taglist have been removed because of xhtml compliance problems with unknown element attributes. 

List control had unknown "disabled" attribute in "a" element.

Calendar control has "Href" instead of "href" and a span wrapper containing table and div.

I will reinstate these controls when I have a fix for these problems.