Drupal - include code highlighting tools (google prettify) with CKEditor

Posted by rolf on Friday, 28 November 2014

This post explaines how to get highlighted code in Drupal 7 like:

for i = 1:3
   j = i;
end

For me the combination of CKEditor and the code highlighting tool Geshi did not work.

Hence I tried the combination of the module [[https://www.drupal.org/project/prettify | google code prettify]] (which is used by stackoverflow.com) and CKEditor.

Prerequisite

CKEditor must be installed. See other post for that.

Getting it to run

  •  Download the latest Google Code Prettify JavaScript library from: http://code.google.com/p/google-code-prettify/ (the minimized version is enough)
  • Extract the content on your computer and place the js files and css inside the following directory (on your (hosted) server): sites/all/libraries/prettify, so that the prettify.js is in the path sites/all/libraries/prettify/prettify.js (otherwise color highlighting of the code will not work). If the folder does not exist, you have to create it.
  • It might be necessary to change the permission of the folder sites/all/libraries/prettify to 755 and all the containing files to 755
  • Install and enable the module [[https://www.drupal.org/project/prettify | google code prettify]] and the [[https://www.drupal.org/project/wysiwyg | wysiwyg module ]]
  • enable the buttons you want for CKEditor under admin/config/content/wysiwyg/profile/filtered_html/edit and especially the button "HTML block format"
  • in the text format "filtered html" admin/config/content/formats/filtered_html following filters work in this order
  1. Convert line breaks into HTML (i.e. <br> and <p>)
  2. Limit allowed HTML tags
  3. Convert line breaks into HTML (i.e. <br> and <p>)
  4.  Correct faulty and chopped off HTML
  •  and add to "Allowed HTML tags": <pre>

Usage 

The easiest is to write your text and write/paste the code and after you've done, mark your code and change the format to "formatted" (the "html block format" button, where you can also change to "heading 2", "heading 3",...

Configuration

  • the google code prettify can be configured under <YOUR-WEBISITE.com>/?q=admin/config/user-interface/prettify
  • I prefer the Style (below "Global Settings") Naspinski Sunburst (see [[http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html | prettify themes gallery]]). 
  • To add line numbers go to the configuration page, search for Show line numbers and click on "YES"

 
Droubleshooting

If the highlighting does not work (e.g. if no color is showing up), change the permissions of the folder sites/all/libraries/prettify and all the containing files to 755.

blog_external_links: 
howto: ckeditor with syntax highlighting
blog_tags: 
drupal
  • 376 reads

Add new comment

More information about text formats

Filtered HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <img> <br> <p> <span>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Code snippets in <code>...</code> or <source>...</source> automatically will be pretty printed.
  • Use [collapse] and [/collapse] to create collapsible text blocks. [collapse collapsed] or [collapsed] will start with the block closed.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Target Image