Resaltar la sintaxis del código en nuestros artículos: ckeditor + Syntax Highlighter

syntax highlight example

Siempre viene bien tener una forma sencilla de insertar código en nuestros artículos, y si además podemos resaltar la sintaxis, mucho mejor. Para ello vamos a usar la reconocida librería Syntax Highlighter integrándola con nuestro editor wysiwyg favorito: Ckeditor y nuestro CMS favorito: Drupal 7 En otro artículo explicaré como hacer lo mismo mediante el módulo wysiwyg, pero en esta ocasión lo vamos a hacer directamente mediante el módulo Ckeditor, que es como funciona en esta web.

Manos a la obra

1. Instalamos el módulo ckeditor

Yo lo voy a hacer mediante drush, pero cada maestrillo con su truquillo. Otro día le dedicaré un artículo a drush

desde nuestra carpeta sites/all descargamos el módulo

drush dl ckeditor

Descargamos la librería ckeditor. La dirección de descarga puede variar, cuando se escribió este artículo estábamos con la versión 3.6.4., para obtener el enlace de descarga, podeis ir a la siguiente dirección: http://ckeditor.com/download

cd modules/ckeditor

wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.4/ckeditor_3.6.4.tar.gz

tar -xzvpf ckeditor_3.6.4.tar.gz

Instalamos el módulo ckeditor

cd ../../../default && drush en ckeditor

2. instalamos el módulo synytax hightlighter

Descargamos el módulo

cd ../all

drush dl syntaxhighlighter

descargamos la librería. Si no tenemos nuestra carpeta libraries, hay que crearla

mkdir libraries

cd libraries

wget http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

unzip download.php?sh_current

Instalamos el módulo

cd ../../default/ && drush en syntaxhighlighter

3. Configuramos syntax highlighter

vamos a la url example.com/admin/config/content/syntaxhighlighter y marcamos los lenguajes que nos interese. Es recomendable marcar la opción "autoload" para así tener todos los lenguajes disponibles y que se carguen bajo demanda.

Activamos la opción "legacy"

4. Instalamos el plugin syntax highlighter para ckeditor

Lo descargamos de aquí: http://code.google.com/p/ckeditor-syntaxhighlight/downloads/list y lo tenemos que colocar su carpeta plugins/highlighter dentro de la carpeta modules/ckeditor/ckeditor/plugins

cd ../all/modules/ckeditor/ckeditor/plugins

wget http://ckeditor-syntaxhighlight.googlecode.com/files/ckeditor-syntaxhighlight-1.0.tar.bz2

bunzip2 ckeditor-syntaxhighlight-1.0.tar.bz2

tar -xvpf ckeditor-syntaxhighlight-1.0.tar

mv ckeditor-syntaxhighlight/plugins/syntaxhighlight/ ./

5. Modificamos el módulo ckeditor

Tenemos que modificar el archivo /sites/all/modules/ckeditor/includes/ckeditor.lib.inc alrededor de la línea 314 en el apartado 'plugins section', insertar el siguiente código:


  if (file_exists($editor_path . 'plugins/syntaxhighlight/plugin.js')) {
      $arr['syntaxhighlight'] = array(
          'name' => 'syntaxhighlight',
          'desc' => t('Syntaxhighlight plugin'),
          'path' => base_path() . $editor_path . 'plugins/syntaxhighlight/',
          'default' => 'f'
      );
  }

6. Configuramos el módulo ckeditor

Configuramos nuestro formato de entrada: para Full HTML, vamos a Administración » Configuración » Autoría del contenido » CKeditor » Full Html o example.com/admin/config/content/ckeditor/edit/Full

Ahí dentro de las opciones Editor appearance > barra de herramientas, e insertamos el botón llamado 'Code' donde queramos, y en plugins, activamos la casilla 'Syntaxhighlight plugin'.

 

Listo, ahora cuando vayamos a crear o editar contenido, con el veremos el botón y podremos insertar código escogiendo el leguaje y resaltando la sintaxis para ese lenguaje

 

Fuente: http://drupal.org/node/1187558

Añadir nuevo comentario

Plain text

  • No se permiten etiquetas HTML.
CAPTCHA
Esta pregunta es para evitar el envío automático de spam