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
gcprettifywhich 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
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>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 themt.jsscript (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>
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
gcprettifyattribute and a true value:<$mt:EntryBody gcprettify="1"$> <$mt:EntryExtended gcprettify="1"$>Save the templates.
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>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
- Move the GCPrettify plugin directory to the MT
pluginsdirectory. - Move the GCPrettify
mt-staticdirectory to themt-static/pluginsdirectory.
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
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.