Montrer du code colorisé avec ckeditor

Ludo_17

Bonjour,

montrer un bout de code colorisé dans un article avec ckeditor et SyntaxHighlighter 2 sur pluxml 4.3.x

1) Cela nécessite d'installer préalablement le plugin ckeditor 3.x => wiki : http://wiki.pluxml.org/?page=Ajouter%20CKeditor%20pour%20%C3%A9crire%20des%20billets

2) Puis le plugin ckeditor-syntaxhighlight

http://code.google.com/p/ckeditor-syntaxhighlight/

qu'il faut télécharger ici

Installation : mettre le dossier syntaxhighlight contenu dans l'archive téléchargée, dans le dossier 'plugins' du plugin ckeditor (donc ainsi : plugins/ckeditor/plugins/syntaxhighlight/)

Modifier plugins/ckeditor/config.js en ajoutant les deux lignes non commentées ci-dessous:

CKEDITOR.editorConfig = function( config )
{
	config.extraPlugins = 'syntaxhighlight';
        config.toolbar_Full.push(['Code']);
        // Define changes to default configuration here. For example:
	 //config.language = 'ru';
	// config.uiColor = '#AADC6E';
};

Ce plugin va permettre d'ajouter un bouton (enfin, chez moi, deux boutons identiques se sont installés ?!) 'code' dans la barre de menu de l'éditeur ckeditor.
Un clic sur ce bouton affichera une fenêtre dans laquelle vous pourrez coller le code que vous voulez insérer dans votre article. Lors de la validation, le code en question sera placé dans un bloc 'pre' avec un id que SyntaxHighlighter reconnaitra.

3) Pour que le code soit colorisé à l'affichage de l'article, il faut installer SyntaxHighlighter

http://alexgorbatchev.com/wiki/SyntaxHighlighter, la dernière version est 2.1.364 (en février 2010)

A télécharger ici

Personnellement, j'ai placé le dossier syntaxhighlighter -ne pas confondre avec celui de (2)- (contenant notamment les dossier 'scripts' et 'styles' dans le dossier du thème que j'utilise.
Puis j'ai modifié le fichier header.php en ajoutant les lignes suivantes dans l'entête de la page (donc avant <./head>)

<script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shCore.js"></script>
 <script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushPhp.js"></script>
 <script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushCss.js"></script>
 <script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushJScript.js"></script>
 <link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/syntaxhighlighter/styles/shCore.css" />
 <link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/syntaxhighlighter/styles/shThemeDefault.css" />
 <script type="text/javascript">
 SyntaxHighlighter.config.clipboardSwf = '<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/clipboard.swf';
 SyntaxHighlighter.all();
 </script>

A savoir qu'il y a un script par language. Ci-dessus, seuls php, css et javascript sont prévus. Si vous souhaitez éventuellement montrer du code d'autres languages, ajouter autant de lignes que de languages (voir le nom des fichiers dans syntaxhighlighter/scripts/ et les exemples ici )

Utilisation :
Lors de la rédaction d'un article, si vous souhaiter montrer un bout de code source, cliquez sur le bouton 'code' dans la barre de menu de ckeditor. Une fenêtre s'ouvre, collez-y votre code, choisissez le language. Une config avancée est possible pour masquer les numéros de ligne par exemple etc... Validez.

Le code est à présent inséré entre des balises 'pre'. Lorsqu'il s'affichera dans l'article, il sera colorisé et un menu contextuel s'affichera à son survol, permettant au visiteur de voir la source, copier ou imprimer le code en question.
Note : il faut que les lignes de code comportent des espaces. Si une ligne assez longue n'a aucun espace, elle ne pourra être scindée par le script et elle dépassera du cadre de l'article (on doit pouvoir résoudre ça avec un 'visibility hidden' dans le css de pluxml concernant le div class post)
Le code n'apparait pas colorisé lors de l'édition de l'article car le header.php modifié précédemment n'est évidemment pas utilisé pour l'admin.

Amusez-vous bien

Cordialement,
Ludo

Hamtaro

Merci bcp, c'est très pratique.

stevanovich

Merci .
Fonctionne à merveille !

Cordialement.

stevanovich

Voici une autre méthode de lancement, qui permet de changer de thème sans avoir à rajouter les éventuelles lignes manquantes (facilité de basculement entre thème).

Dans le fichier header.php , avant la balise (/head)

<?php require_once("plugins/syntaxhighlighter_launch.php");?>

J'ai dézipper le syntaxhighligter dans /plugins (./plugins/syntaxhighligter)

et j'ai créer un fichier syntaxhighlighter_launch.php:

<script type="text/javascript" src="../plugins/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="../plugins/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="../plugins/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="../plugins/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/syntaxhighlighter/styles/shCore.css" />
<link rel="stylesheet" type="text/css" href="../plugins/syntaxhighlighter/styles/shThemeDefault.css" />
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '../plugins/syntaxhighlighter/scripts/clipboard.swf';
  SyntaxHighlighter.all();
</script>

Si ça peut en aider certains ....

Cordialement.

l e . n o x

Bonsoir,

Pour la version PluXml 5.1.1 & 5.1.2 à cette procedure il faut y ajouter ceci :

ouvrir le fichier ckeditor.php du plugin. (www.../pluxml/plugins/ckeditor/ckeditor.php)
Chercher :

['Bold','Italic','Underline','Strike','-','Link','Image','Flash','Unlink','Anchor','-','NumberedList','BulletedList','-','Outdent','Indent','-','Subscript','Superscript','Blockquote'],

et remplacer par ceci :

['Bold','Italic','Underline','Strike','-','Link','Image','Flash','Unlink','Anchor','-','NumberedList','BulletedList','-','Outdent','Indent','-','Subscript','Superscript','Blockquote','Code'],

http://forum.pluxml.org/viewtopic.php?pid=18961#p18961 Merci Bloody ;o)

Bonne soirée

Bloody

De rien, l e . n o x