Back to Projects

Prettify Highlighter

  • on 09/04/2010 (updated on 25/03/2014)
  • in plugins, wolf.

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;
}