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

August 23, 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 Follow.

How to Enable System Tray on Fedora 34 Gnome 3
  1. Download Syntaxhighlighter:

    Syntaxhighlighter .zip Library
  • Unzip the archive Into:

  • Install the Syntaxhighlighter Module:

    Syntaxhighlighter Drupal Module
  • Download Ckeditor-Syntaxhighlight Plugin:

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

  • 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.
  • Make Setup of the Ckeditor Module Advanced Role, go on Browser to this URL:


    Select -> "Editor appearance".

    Check-In the Plugin:

  • Load the Fulll CKeditor Toolbar sample:

  • Latest Give the Right Admin Roles Permissions on:


  • Enjoy! :)ds.

    Tags: , , , , , , ,