Prettify Code: Syntax Highlighting in Content Display

In some use cases, we need to display code such as PHP, CSS or HTML snippets on our Drupal posts or content, and we want Drupal to highlight the code or display it in a formatted way, with syntax highlighting, like this:

prettfy code

To achieve this, we'll use a lightweight Drupal module that integrates the Google Code Prettify JavaScript library.

Module: https://drupal.org/project/prettify

Library: https://code.google.com/p/google-code-prettify/

Installation and Setup

  • Install the Prettify module
  • Download the Prettify library from Google Code. Upload the library files to /sites/all/libraries/prettify so that your .js and .css files are in that folder
  • Enable the Source Code Prettifier filter in your Text Formats (see below)

prettify filters

Setup and Configuration

  • Configure at Configuration > User Interface > Code Prettify (path: /admin/config/user-interface/prettify)

Configuration

 

On the Confguration page, you can select your Styles, Markup, Optional Language Extensions and Performance options.

How to Use

To "prettify" your code display, simple enclose your text in your defined markup such as <pre>, <source> or <code>

<?php
         echo "This is prettified and enclosed with pre tag";
?>