Drupal 7 Syntax Highlighting with WYSIWYG and TinyMCE

原文：http://stuartmcgoldrick.com/drupalwysiwyg

Introduction

This article is designed to help you get Syntax Highlighting working correctly with your Drupal 7 installation and using a WYSIWYG editor. The outcome of this tutorial is to be able to insert blocks of code into Drupal articles/pages like the block below through a WYSIWYG editor (TinyMCE in this case).

?

Example

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// Database variables private SQLiteDatabase          database; private TranslationOpenHelper   databaseOpenHelper;   //Define a static array containing the columns names private String[]                columnArray = {TranslationOpenHelper.TABLE_COLUMN_ID, TranslationOpenHelper.TABLE_COLUMN_WORD, TranslationOpenHelper.TABLE_COLUMN_TRANSLATION };   /**  * Initialise the object (note this does not open the database)  * @param context  */ public TranslationDataSource(Context context) {     databaseOpenHelper = new TranslationOpenHelper(context); }

Prerequisites

You should have a firm grasp of Drupal and how to install modules and libraries. If you are unfamiliar with these aspects I recommend reading the Drupal documentation at drupal.org.

Installation Instructions

You will need a handful of drupal modules and libraries to get syntax highlighting working correctly, unfortunately its not a straightforward process, but this article will guide you through.

These are (as of 19/08/2012):

1. Drupal WYSIWYG (What you see is what you get) Module v7.x

This is the module that will allow us to use a WYSIWYG editor to create articles. Note: This is only an API module, you have to download the WYSIWYG editor separately (which is TinyMCE in this tutorial).

Download Link: http://ftp.drupal.org/files/projects/wysiwyg-7.x-2.1.zip

Project Home and Installation Instructions: http://drupal.org/project/wysiwyg

Installation Instructions:

• Extract all files from the archive into the Module folder on your site.
• Enable the module through the module administation section of your Drupal instance by selecting the Enabled heckbox (pictured below).

 

2. Syntax Highlighter Module

This is the module that will do the syntax highlighting on our pages.

Download Link: http://ftp.drupal.org/files/projects/syntaxhighlighter-7.x-2.0.zip

Project Home: http://drupal.org/project/syntaxhighlighter

Installation Instructions: 

• Extract into your module directory on your site, then enable from the Administation console.
• After you have saved your changes and the module is enabled, click on the Configure link next to the item.
• You will see a list of programming languages like the image below, check the items which you will be using.
• Save the modified configuration.

 

3. Syntaxhighlighter Insert:

This module adds a handy Insert SyntaxHighlighter tag button into the WYSIWYG editor to streamline the process of embedding code into an article or page.

Download Link: http://ftp.drupal.org/files/projects/syntaxhighlighter_insert-7.x-1.0.zip

Project Home: http://drupal.org/project/syntaxhighlighter_insert

Installation Instructions: 

• Extract into your module directory on your site, then enable from the Administation console. Note that there will be 3 items to enable.
• We will integrate this module with TinyMCE in a later step.

4. WYSIWYG Pre Element Fix

The WYSIWYG editor currently has some issues with <pre> elements which causes the Syntax Highlighter not to work. So to get around this we need to use this module. As of writing, the Drupal 7 compatible version is still being developed, so I've included a copy of the current working build from Git. You should check the project site for an update before using my copy.

Download Link: http://stuartmcgoldrick.com/downloads/wysiwyg_preelementfix.zip

Project Home: http://drupal.org/project/wysiwyg_preelementfix

  Installation Instructions: 

• Extract into your module directory on your site, then enable from the Administation console.

  

5. TinyMCE v3.5.6 

TinyMCE will be the WYSIWYG editor used to create articles and pages with rich content (and it is free).

Download Link: http://github.com/downloads/tinymce/tinymce/tinymce_3.5.6.zip

Project Home: http://www.tinymce.com/

Installation Instructions:

• Unpack tinymce folder into your sites/all/libraries directory.
• Go to your Administration >> Configuration >> WYSIWYG profiles section
• For the Full HTML item, change the Editor to TINY MCE
  
  
• Click Save, you will then see an Edit link appear in the operations section, click on this link to bring up the Edit Window.
• There are many options here you can play around with but the first important item to update is the list of Buttons and Plugins. This will define what buttons will be available for use in your editor. I recommend selecting almost all of the items in plain black text as a base. If you have installed the SyntaxHighlighter Insert module correctly you will also have an item called Insert syntaxhighlighter tag at the bottom of the list, make sure this is checked (see picture below).
  
• In the Cleanup and Output section make sure only the following options are checked:
• Verify HTML
• Convertn <font> tags to styles
• Remove linebreaks
  
• Save the configuration changes.
• Browse to Administration >> Configuration >> Text Formats.
• Click on the Configure link next to the Full HTML item.
• In the Enabled Filters section make sure only the following options are checked (as pictured below):
• Convert URLs into links
• Convert line breaks into HTML
• Syntax Highlighter -- If this is not showing then something is wrong with your installation.
• Correct fault and chopped off HTML
• Check that the Filter processing order is as pictured above, this is important otherwise the syntax highlighting will be overridden by normal formatting
• Convert URLs into links
• Syntax Highlighter 
• Convert line breaks into HTML
• Correct fault and chopped off HTML 
• Save your configuration

Using the WYSIWYG Editor and syntax highlighting

• Now that you are setup and ready to go, all you need to do is open up a new or existing article/page an existing page.
• Under the Body element is a drop down list called Text Format, change it to Full HTML (if not already set). You should see the Body input change and now buttons should be displayed (see pictured).
  
• The icon on the far right of the tool bar is the "Insert Syntaxhighlighter" button, click it to view the Insert page (pictured below).
• This page allows you to set various options but the main ones are:
• Title: a title for your code block
• Brush: Defines the type of syntax highlighting, ie Java, HTML etc.
  
• Click Insert SyntaxHighlighter Tag to insert the highlighting block.
  
• Paste your code into the block. Note: It will not be highlighted at this point and may look a little ugly.
  
• Save and view the page to see the results!

?

Example

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<br class="Apple-interchange-newline">  // Database variables     private SQLiteDatabase          database;     private TranslationOpenHelper   databaseOpenHelper;           //Define a static array containing the columns names     private String[]                columnArray = {TranslationOpenHelper.TABLE_COLUMN_ID, TranslationOpenHelper.TABLE_COLUMN_WORD, TranslationOpenHelper.TABLE_COLUMN_TRANSLATION };       /**      * Initialise the object (note this does not open the database)      * @param context      */     public TranslationDataSource(Context context)     {         databaseOpenHelper = new TranslationOpenHelper(context);     }