Drupal 7 How-to Install Ckeditor-Syntaxhighlither Plugin Easy Visual-Guide

August 23rd, 2012 by Regaz



This Easy&Friendly-Guide; Clearly Show How-to Install and Enable the Ckeditor-Syntaxhighliter Plugin on Drupal 7.

And this Visual Guide includes the Basic Screenshots of All GUI Steps involved.

The Content give Focus Only to the Essentials Instructions and Commands to make it Easier to Understand;)

Linux-Ubuntu Penguin
  1. Download Syntaxhighlighter:

    Syntaxhighlighter .zip Library
  2. Unzip the archive Into:


    /sites/all/libraries
  3. Install the Syntaxhighlighter Module:

    Syntaxhighlighter Drupal Module
  4. Download Ckeditor-Syntaxhighlight Plugin:

    Syntaxhighlight .tar.bz2
  5. Copy the ckeditor-syntaxhighlight/plugins/syntaxhightlight Folder Into:


    /sites/all/modules/ckeditor/plugins/syntaxhighlight
  6. Edit the sites/all/modules/ckeditor/ckeditor.config.js file and Insert/Change the highlighted lines:

    Add syntaxhighlight on the Line Beginnig for: config.extraPlugins


    config.extraPlugins = 'syntaxhighlight';


    //Toolbar definition for Advanced buttons
    Drupal.settings.cke_toolbar_DrupalAdvanced = [

    Insert 'Code' Into:


    ['DrupalBreak', 'DrupalPageBreak', 'Code']
    ];


    //Toolbar definition for All buttons
    Drupal.settings.cke_toolbar_DrupalFull = [

    Insert 'Code' Into:


    ['DrupalBreak', 'DrupalPageBreak', 'Code']
    ];

    The Essential thing to take into account After you make all settings is clearly Specified on ckeditor.config.js file:


    /*
    WARNING: Clear the browser cache after you modify this file.
    If you do not do this, you may notice that the browser is ignoring all your changes.
    */
  7. Make Setup of the Ckeditor Module Advanced Role, go on Browser to this URL:


    /admin/settings/ckeditor/edit/Full

    Select -> "Editor appearance"

    Check-In the Plugin:

  8. Load the Fulll CKeditor Toolbar sample:

  9. Latest Give the Right Admin Roles Permissions on:


    yourDrupalDomain/admin/settings/ckeditor/edit/Advanced

Enjoy! :)ds

Tags: , , , , , , ,