Montrer du code colorisé avec ckeditor
Ludo_17
Member
dans Modifications
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:
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>)
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
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
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Fonctionne à merveille !
Cordialement.
Dans le fichier header.php , avant la balise (/head)
J'ai dézipper le syntaxhighligter dans /plugins (./plugins/syntaxhighligter)
et j'ai créer un fichier syntaxhighlighter_launch.php: Si ça peut en aider certains ....
Cordialement.
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 :
et remplacer par ceci :
http://forum.pluxml.org/viewtopic.php?pid=18961#p18961 Merci Bloody ;o)
Bonne soirée