Not a developer? Go to MovableType.com

Plugin and Theme Directory

GCPrettify v0.5

By Byrne Reese
Posted November 14, 2009, in Developer.

Details

GCPrettify is a plugin designed to allow easy use of Google Code’s prettify.js script for syntax highlighting of code samples.

GCPrettify 0.5 uses the May 21, 2009, release of the prettify.js code.

Features

  • Provides the global MT tag modifier gcprettify which when set will replace all <code> html tags in the output content of the modified MT tag with <code class="prettyprint">.

    Any <code> html tags with an existing class such as <code class="my-example"> or <code class="nopretty"> will not be replaced.

  • Alters the default “Convert Line Breaks” filter by restricting the creation of <br /> and <p> tags within the context of <pre> blocks.

Documentation

Integrate Prettify Functionality

  1. Add the Prettify script and style links to the html <head> element:

    <link href="<$mt:StaticWebPath$>plugins/GCPrettify/prettify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<$mt:StaticWebPath$>plugins/GCPrettify/prettify.js"></script>
    
  2. To trigger the styling the prettyPrint() javascript function must be called after the html page has loaded. To do this use one of the following methods after including the above scripts:

    • After the <script> tag loading the mt.js script (which may be in the <head> as well) add the following:

      <script type="text/javascript">mtAttachEvent('load', prettyPrint);</script>
      
    • If using jQuery, add this code after including the jQuery script:

      <script type="text/javascript" charset="utf-8">
          $(document).ready(function() {
              prettyPrint();
          });
      </script>
      
  3. Update template tags outputting content which will contain <code> html tags.

    If <code> html tags will be added in the “body” or “extended” of entries, search the Movable Type templates for these tags:

    <$mt:EntryBody$>
    <$mt:EntryExtended$>
    

    Update these tags with the gcprettify attribute and a true value:

    <$mt:EntryBody gcprettify="1"$>
    <$mt:EntryExtended gcprettify="1"$>
    

    Save the templates.

  4. Create a new entry and paste the following code into the body of the entry:

    <pre><code>
    /* calculate nth fibonacci number */
    int fib(int n) {
        if (n < 2)
            return 1;
        return fib(n - 2) + fib(n - 1);
    }
    </code></pre>
    
  5. Publish and view entry.

    The “prettyPrint” JavaScript function called on load will then detect all <code> tags with the “prettyprint” class, parse their contents, and the appropriate span elements for syntax highlighting.

    Further details on the operations of this script are available at the google-code-prettify page.

    View the page html source and you’ll see that MT has updated the <code> html tag with the “prettyprint” class:

    <pre><code class="prettyprint">
    /* calculate nth fibonacci number */
    int fib(int n) {
        if (n < 2)
            return 1;
        return fib(n - 2) + fib(n - 1);
    }
    </code></pre>
    

Styling <code> HTML Tags in Other Templates

Because the prettify.js script will “prettify” any <code> tag which has the “prettyprint” class, any <code> blocks which have the “prettyprint” class in the published html source code will be “prettified” upon page load.

In index templates manually add the “prettyprint” class to all <code> html elements:

<pre><code class="prettyprint">
document.write('<b>Hello World</b>');
</code></pre>

Installation

  1. Move the GCPrettify plugin directory to the MT plugins directory.
  2. Move the GCPrettify mt-static directory to the mt-static/plugins directory.

Should look like this when installed:

$MT_HOME/
    plugins/
        GCPrettify/
    mt-static/
        plugins/
            GCPrettify/

Desired Features

  • Blog-level overrides of the default GCPrettify style sheet
  • Alteration of “Convert Line Breaks” filtering only within tags affected by the gcprettify tag modifier

Support

This plugin is not an official Six Apart release, and as such support from Six Apart for this plugin is not available.

Compatibility

Movable Type versions: 4.3

License

Perl Artistic


Back

7 Comments

nish gau

nish gau on September 18, 2016, 11:56 a.m. Reply

Hi Byrne, Thanks for sharing such informative posts. It helped me a lot. Awesome plugin details explained in your article above. keep posting. Thanks. instagram follower

Brayan Meadows

Brayan Meadows on May 26, 2017, 4:49 p.m. Reply

I think Byrne is one of the reasons why I have stayed with MT as my CMS of choice. There are a lot of other options out there that give you the chance to publish to the web, MT is the easiest, most feature filled option there is in my opinion. And this is due to no small contribution by Byrne. I have used it here on rusticweddinginvitations.xyz since day one and I couldn’t be happier about the decision.

nish gau

nish gau on September 18, 2016, 11:58 a.m. Reply

Hi Byrne, Thanks for sharing such informative posts. It helped me a lot. Nice coding explained. Awesome plugin details explained in your article above. keep posting. Thanks. instagram follower

avaya duggu

avaya duggu on March 17, 2017, 5:58 a.m. Reply

amazing information thank you sharing this information easter day images pictures easter egg images

avaya duggu

avaya duggu on March 17, 2017, 5:59 a.m. Reply

amazing information thank you for sharing this information easter day images pictures easter egg images

joelle

joelle on May 10, 2017, 8:51 a.m. Reply

Bienvenue pour la visite de mon site ! Quelques altérations communes pour une robe pour un mariage qui ne rentre pas. J’espère que vous apprécierez tous les jours avec moi dans ce petit espace !

johnrosner

johnrosner on June 7, 2017, 3:57 a.m. Reply

Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up! 192.168.o.1 192.168.l.254

Leave a Comment

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese