Ajouter SyntaxHigliter a Ckeditor 4
Pour ce site j'utilise le wisiwig ckeditor et j'ai décider d'installer syntaxHigliter pour afficher mes ligne de code source. Après avoir eu plusieurs erreurs avec les différents plugin j'ai décider de réparer un de ces plugin pour le faire marcher avec la version 4 de ckeditor.
Télécharger mon plugin syntaxHigliter pour ckeditor 4
Pour l'installer il suffit de mettre ce répertoire dans le répertoire plugin de ckeditor et d'ajouter dans vos pages les includes JS et CSS.
A ajouter dans vos page dans le head
<!-- syntaxhighlight --> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script> <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shLegacy.js"></script> <link type="text/css" rel="stylesheet" href="ckeditor/plugins/syntaxhighlight/styles/shCoreDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.all(); </script>
Dans mon cas j'ai enlevé plusieurs styles que je n'utilise pas tel que
- AppleScript
- ASP
- ColdFusion
- Cpp
- CSharp
- Delphi
- Perl
- Sass
- Python
- ...
Mais vous pouver les utilisés juste en ajoutant les script JS associé et en ajoutant leur chois au menu de sélection (modifier ligne 163 du fichier ckeditor/plugins/syntaxhighlight/dialogs/syntaxhighlight.js)