views:

338

answers:

2

I'm actually challenged with documenting aspects/problems/usages of inherited source code to teach and train co-workers as well as to identify problems that should be future maintenance tasks... The idea is to create an internal wiki or blog with short articles that highlight certain features and provide hints for using the API.

We already have a Plone instance installed to capture knowledge, what I'm missing is a syntax highlighting feature, which to me is essential for this task.

Does anyone have experience with syntax highlighting in Plone, preferable with integrating Google Prettify or Pygments so that tagged content on a Plone page becomes syntax highlighted and can provide hints or solution how it can be done?

Any suggestions even for a different tool that could support that mission are highly welcome as well!

Edit

What I tried so far (with Google Prettify) with a little help from a tutorial on plone.org:

  1. added prettify.css and prettify.js as files to portal_skins/custom
  2. added prettify.css to portal_css, switched on Debug mode
  3. added prettify.js to portal_javascripts, switched on Debug mode

Then I created a plone page, added some java code and encapsulated it with <pre class="prettyprint">...</pre> tags. But it's not getting highlighted. When I look at the pages souce code (from firefox) I cleary see that prettify.js is included... So at least I'm on the correct path!?

Edit

As suggested by Martijn:

  1. added prettify-glue.js (jQuery(prettyprint);)as file to portal_skins/custom
  2. added prettify-glue.js to portal_javascripts after prettify.js

... didn't change anything. pre formatted blocks with "prettyprint" class still appear in standard Plone theme style.

Edit

Finally made it. I reversed steps 4 and 5 and customized main_template.pt: added onload="prettyPrint()" to the body tag. And I disabled compression for both prettify.js and prettify.css and unchecked 'merging' for the script in the according registries. Now I have proper syntax highlighting on Plone pages.

+1  A: 

The documentation states you'll have to tell Google Prettify to start highlighting during onLoad. Add an extra Javascript file to your plone project (custom skin folder, as a browser resource or skin file in your on-disk package/product, etc) that contains the following:

jQuery(prettyprint);

and register that file to be included after the prettify.js file in portal_javascripts. It'll execute the prettyprint function when the DOM is loaded, and is the equivalent of the <body onload="prettyprint()"> example in the Prettify documentation.

Martijn Pieters
Thanks for that hint - Now I created a file prettify-glue.js with that single line, added and registered as you described but it changes nothing... as if it ignores the class attribute and uses standard `<pre>` behaviour. Both scripts and the css appear in the page source so they're added correctly.
Andreas_D
You can use alert() or console.log (if you use firebug) to check if your code is loading correctly. Try something like: `jQuery(function() { alert('onLoad prettyprint-glue.js'); prettyprint(); });` inside your glue code.
Martijn Pieters
+1  A: 

I do not remember exactly how I got this to work, but check out the commit-log for the commit log for the commit where I made the required changes to one of my skins.

Espen_AK
That helped a lot - Now I customized the main_template.pt and added the onload attribute to body. It highlights now!! But... now it adds spaces in between the words, like `class` is becoming a coloured `c l a s s ` ... could be an encoding issue !?
Andreas_D