Drupal 7 Tutorial: Getting Syntax Highlighter + CKEditor to work properly with the WYSIWYG module

This tutorial will explain how to get the Syntax Highlighter plugin to work properly with the CKEditor plugin and WYSIWYG module.  I will assume that you already have a Drupal 7 installation ready, so the next thing to do is making sure we have the required modules and plugins.

Make sure you have the following downloaded:

If you have the previously mentioned downloaded, then let's start!

 

1.) The WYSIWYG, Syntax Highlighter, and Syntaxhighlighter Insert modules are downloaded as archives, so unzip them and move them to the Drupal modules directory located at /sites/all/modules.


2.) Log into Drupal as admin and proceed to the "Modules" page:


3.) On the "Modules" page, enable the WYSIWYG, Syntax Highlighter, and Syntaxhighlighter Insert modules:


4.) Unzip the CKEditor and Syntax Highlighter plugin and then move them into the Drupal libraries directory located at /sites/all/libraries

  • The CKEditor location should look like: /sites/all/libraries/ckeditor/
  • The Syntax Highlighter location should look like: /sites/all/libraries/syntaxhighlighter_3.0.83

5.) Make sure you're still logged in as an admin in Drupal and proceed to the "Configuration" page.


6.) On the "Configuration" page, find the link for "Wysiwyg Profiles" under "Content Authoring" and click on it.


7.) Find the text format you're going to be using CKEditor for, then in the "Editor" column, select CKEditor and save:


8.) After saving the selection, you'll be back to the same page.  Click on the "Edit" link under the "Operations" column for the text format that you selected CKEditor for.


9.) Select all the buttons and plugins you would like to use for CKEditor, BUT make sure to select "Insert syntaxhighlighter tag".


10.) Go to the bottom of the configuration page, and find then click on the "Cleanup and output" tab:


11.) In the "Advanced Content Filter" box, make sure the "Mode" is set to "Disabled".  Click "Save" when done.


12.) Now let's make sure that the "Insert syntaxhighlighter tag" button is in the toolbar.  Go create a page and make sure that in the WYSIWYG toolbar for the body field, there is a button for "Insert syntaxhighlighter tag":

Note: You do NOT have to use the "Insert syntaxhighlight tag" button, but you must be an intermediate/advanced user to know how to do so without it.


Example below:

  1. namespace BSL\ProjectBundle\Entity
  2.  
  3. class ClassExample
  4. {
  5. public function sayHelloWorld()
  6. {
  7. echo "Hello World!";
  8. }
  9. }