Prettify Highlighter

Published by Dejan in plugins, wolf. on 09.04.2010

Prettify is syntax highlighting plugin for WolfCMS. It’s lightweight (only 18KB), easy to use and it automatically recognizes variety of languages.

Installation

  1. Download Prettify
  2. Unpack it under wolf/plugins/ directory
  3. Go to Administration->Plugins and enable the plugin
  4. In your Layout add <?php prettify(); ?> between <head></head> tags
  5. Add onload="prettyPrint()" to your Layout body tag

Usage and Examples

HTML and PHP syntax highlighting

For common languages like html and php you just have to add class prettyprint in your <pre> tag like this: 

<pre class="prettyprint">YOUR CODE GOES HERE</pre>

or if you are using Textile filter (like we do on this site), than all you have to do is:

bc(prettyprint). YOUR CODE GOES HERE

HTML and PHP example

Code block (html+php) without Prettify

<!-- comment for sidebar -->
<div id="sidebar">
	<?php echo $this->content('sidebar', true); ?> 
</div>

Code block (html+php) with Prettify

<!-- comment for sidebar -->
<div id="sidebar">
	<?php echo $this->content('sidebar', true); ?> 
</div>

CSS syntax highlighting

Unlike html and php (and other languages) ,which are automatically recognized just by calling prettyprint class, for css you have to add lang-css to existing class like this:

<pre class="prettyprint lang-css">YOUR CSS CODE GOES HERE</pre>

or within Textile filter like this:

bc(prettyprint lang-css). YOUR CSS CODE GOES HERE

CSS example

Css code block without Prettify

/* CSS comment */ 
body { 
	font-size: 100%; 
	color: #222; 
	background: #fff; 
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
}
.someClass { color:#000; } 
#someId {
	margin:0 auto;
	height:100%;
	font-size:1.2em;
}

Css code block with Prettify

/* CSS comment */ 
body { 
	font-size: 100%; 
	color: #222; 
	background: #fff; 
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
}
.someClass { color:#000; } 
#someId {
	margin:0 auto;
	height:100%;
	font-size:1.2em;
}