[plugin]syntaxhighlighter

Jerry Wham · juillet 2011

Bonjour,

Voici un petit plugin construit à partir du formidable outil syntaxhighlighter d'alex gorbatchev
Pour l'utiliser, rien de plus simple :
- pousser les fichiers de l'archive (une fois dézippée) dans le dossier plugin de votre serveur
- activer le plugin dans le panneau d'admin
- ajouter class="brush :php" à la balise <pre> pour obtenir <pre class="brush :php"> (remplacez php par le langage de votre choix, ceux étant supportés étant dans le dossier (scripts) du plugin)

La coloration du langage ne se fera que lorsque l'article sera en aperçu ou enregistré (ce n'est pas un plugin qui colore le texte que l'on tape dans un formulaire).

Le lien pour le télécharger : syntaxhighlighter_1.1.zip

Change log :

**** v 1.1 03/08/2011****
- Bug fix: when using plxEditor toolbar, line breaks where deleted

**** v 1.0 18/07/2011****
- First release

Old versions :
syntaxhighlighter.zip

Enjoy

Johan · août 2011

Super plugin Jerry !
Je test des que possible...

Jerry Wham · août 2011

Merci. Si ça t'intéresse, j'ai aussi fait un plugin avec editera (voir post précédent sur ce même forum).

Johan · août 2011

Je viens de tester ton script, hélas la solution repose sur du JavaScript...
Je désire une solution basée sur PHP comme Geishii par exemple...

Tant pis, mais très bon plugin quand même.

PS : Est-ce utile de mettre le répertoire compass et test dans le zip du plugin ?

Jerry Wham · août 2011

@Johan : je n'avais pas envisagé l'utilisation de geshi. Je vais essayer de m'y pencher dessus.
Pour ce qui est des répertoires compass et test, ce n'est pas nécessaire de les mettre. Ils étaient disponibles dans l'archive d'origine. Je les ai donc laissés.

Petite précision : si on utilise le plugin plxEditor, les sauts de lignes dans la balise < pre > sont supprimés. Pour palier au problème, il est nécessaire d'ajouter les quelques lignes suivantes juste avant SyntaxHighlighter.all(); dans le fichier syntaxhighlighter.php, ligne 49 :

$(jQuery(function($){
				var reg = RegExp('<br>','g');
				$('pre').each(function(i) { 
					var content = $(this).html();
					content = content.replace(reg,"\n");			
					$(this).html(content);
				});
			   }
			));

La modification est prise en compte dans la nouvelle version du plugin.

Edit : ça bugue toujours avec ie7, sauf à ne pas utiliser plxToolbar. Je veux bien un coup de main car je sèche sur le coup...

l e . n o x · août 2011

Bonjour,

Pour les petits newbiz comme moi sur pluxml, pour faire fonctionner le plugin "syntaxhighlighter_1.1.zip"
Il faut décompresser l'ensemble de l'archive dans le dossier :
www.../pluxml/plugin/syntaxhighlighter/

et non

www.../pluxml/plugin/syntaxhighlighter_1.1/

Les fichiers zip des plugins sont à décompresser dans le dossier plugins de Pluxml.
Pour les activer allez dans "Paramètres/Plugins" de l'administration, sélectionnez le plugin et dans le déroulant "Pour la sélection..." choisir l'option "Activer".

Modifier le fichier www.../pluxml/plugin/plxeditor/plxeditor.js

avec

<option value="<pre>">Pre</option>

par

<option value="<pre class="brush :php">">Pre</option>

vous trouverez la ligne ici :

(********* ligne 83 ********** ;O)
		// toolbar

		html += '<table id="'+this.textareaId+'-toolbar" class="buttons" cellspacing="0" cellpadding="0"><tr>';

		html += '<td> <select onchange="'+this.editor+'.execCommand(\'formatblock\', this.value);this.selectedIndex=0;"><option value="">Style</option><option value="<h1>">H1</option><option value="<h2>">H2</option><option value="<h3>">H3</option><option value="<p>">P</option><option value="<pre>">Pre</option></select></td>';

		html += '<td><div class="separator"></div></td>';

!!!!!!!! (hmm c'est bizarre cela ne fonctionne pas !! est ce vraiment ce fichier qu'il faut modifier ?) !!!!!!!!!

Bonne continuation @ tous et merci @ Jerry Wham pour le partage ;O)

Jerry Wham · août 2011

Je n'utilise pas plxeditor mais m'en avis que le contenu du formulaire doit être parsé avant enregistrement. Peut-être faut-il regarder de ce côté ???

Bloody · août 2011

Et pour ceux utilisent CKEditor, je me suis fait un petit tuto sur mon blog.

http://portfolio.chantdeleau.com/article21/pluxml-et-coloration-syntaxique

Jerry Wham · août 2011

l e . n o x a écrit:

!!!!!!!! (hmm c'est bizarre cela ne fonctionne pas !! est ce vraiment ce fichier qu'il faut modifier ?) !!!!!!!!!

C'est le bon fichier mais ce ne sont pas les bonnes lignes.
Il vaut mieux modifier les lignes 302 et suivantes et ajouter

//search for pre tags
		html = html.replace("<span class=\"tag\"><pre></span>", "<span class=\"tag\"><pre class=\"brush :php\"></span>");

avant le return html.

Là ça devrait fonctionner (sauf pour ie)...

kiyoshi · novembre 2011

Bonjour !

J'ai un petit problème. Je souhaiterai utiliser ce plugin afin d'éviter l'utilisation classique de SyntaxHighlighter en ajoutant des lignes dans header.php.

Voici comme je l'utilise :

<pre class="brush :bash">
#!/bin/bash
message='Bonjour tout le monde'
echo "Le message est : $message"
</pre>

C'est bien ça ?

J'ai comme résultat un texte formaté différemment avec une autre police mais c'est tout. Pas d'encadré, numéro de ligne et de coloration.

Je suis sous Pluxml 5.1.3 et j'utilise le plugin plxToolbar 1.2. Le plugin de SyntaxHighlighter est bien activé.

Merci pour votre aide !

Jerry Wham · novembre 2011

Il faut ajouter le fichier js correspondant au langage que tu veux utiliser. Je n'ai mis que ceux que j'utilise le plus souvent (php, js, xml...). Si tu veux colorer le langage bash, il faut ajouter le fichier shBrushBash.js dans la fonction addSyntaxhighlighter du fichier principal du plugin.

kiyoshi · novembre 2011

Même résultat, j'ai rajouté cette ligne dans syntaxhighlighter.php

<script type="text/javascript" src="<?php echo PLX_PLUGINS; ?>syntaxhighlighter/scripts/shBrushBash.js"></script>

Voici le contenue de mon article :

<pre class="brush :php">
// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}
</pre>

<pre class="brush :bash">
#!/bin/bash
message='Bonjour tout le monde'
echo "Le message est : $message"
</pre>

J'ai donc essayé avec bash et php en même temps mais, aucun des deux ne fonctionnent

J'ai l'impression de passer à côté de quelque chose.

Jerry Wham · novembre 2011

Est-ce que tu peux nous mettre un lien vers ton site ?

kiyoshi · novembre 2011

Voici un lien vers un article de test : http://lemanchot.fr/article3/syntaxhighlighter

Merci

Jerry Wham · novembre 2011

Je pense qu'il te manque juste jquery. Il faudrait l'importer avant d'utiliser le plugin.
Il y a des plugins tout prêts.

kiyoshi · novembre 2011

Ok, j'y suis allé tête baissée et je n'avais pas mis le plugin jQuery.

Mais une fois activé même résultat

Jerry Wham · novembre 2011

Il faut que jquery soit avant l'appel des fonctions de syntaxhighlighter car ce dernier est une extension de jquery.
Il faut donc appeler jquery puis appeler highlighter sinon la console te dira que l'objet $ (qui correspond à jquery) n'existe pas.

kiyoshi · novembre 2011

J'avoue ne pas bien comprendre. Tu me demandes de modifier le code ?

Finalement, comment met-on en place ce plugin?

Voilà comment pour ma part comment je vois la chose :

1. On télécharge le plugin officiel jQuery, je dé-zippe, je copie dans le dossiers plugins et l'active dans le back-office.
2. Je télécharge le plugin Syntaxhighlighter, je le dé-zippe, je renomme le dossier dé-zippé en "syntaxhighlighter" le copie dans le dossier plugins et l'active dans le back-office.

À partir de là la coloration syntaxique devrait fonctionner au moins pour PHP ou je me trompe ?

Merci pour votre patience et votre aide encore une fois.

Jerry Wham · novembre 2011

Oui c'est ce qu'il faut faire afin que les lignes de code générées par le plugin jquery s'écrivent avant celles du plugin syntaxhighlighter.

Au final, quand tu affiches le code source avec ton navigateur (Ctrl + U pour Firefox), tu dois avoir quelque chose comme :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<!-- Réécriture des URL problème de de Duplicate Content-->
	<link rel="canonical" href="http://lemanchot.fr/article3/syntaxhighlighter" />

<!-- Google Analytics-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26901670-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<head>
<!--	Pour le titre du blog	-->
	<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

<!--  Pour le tirre des articles	-->
	<link href='http://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
<!-- Pour les paragraphes -->
	<link href='http://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>

	<title>Test du Plugin Syntaxhighlighter - Le Manchot</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Un blog qui porte sur les nouvelles technologies, le web, linux, l'open source mais pas que..." />
	<meta name="keywords" content="linux open source web tech blog" />

	<meta name="author" content="Xavier" />

	<link rel="icon" href="http://lemanchot.fr/themes/defautXav/img/favicon.png" />
	<link rel="stylesheet" type="text/css" href="http://lemanchot.fr/themes/defautXav/style.css" media="screen" />
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="http://lemanchot.fr/themes/defautXav/ie.css" media="screen" />
	<![endif]-->
	
	<link rel="alternate" type="application/rss+xml" title="Fil Rss des articles" href="http://lemanchot.fr/feed/rss" />
	<link rel="alternate" type="application/rss+xml" title="Fil Rss des commentaires" href="http://lemanchot.fr/feed/rss/commentaires" />

		<script type="text/javascript" src="http://lemanchot.fr/plugins/jquery/jquery.min.js"></script>
		
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shCore.js"></script>

		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushPhp.js"></script>
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushCss.js"></script>
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushPlain.js"></script>
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushJScript.js"></script>
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushXml.js"></script>
		<script type="text/javascript" src="http://lemanchot.fr/plugins/syntaxhighlighter/scripts/shBrushBash.js"></script>

		<link rel="stylesheet" type="text/css" href="http://lemanchot.fr/plugins/syntaxhighlighter/styles/shCoreRDark.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="http://lemanchot.fr/plugins/syntaxhighlighter/styles/shThemeRDark.css" media="screen" />

		<script type="text/javascript">
			$(jQuery(function($){
				var reg = RegExp('<br>','g');
				$('pre').each(function(i) { 
					var content = $(this).html();
					content = content.replace(reg,"\n");			
					$(this).html(content);
				});
			   }
			));
			SyntaxHighlighter.all();
		</script>
		
</head>

kiyoshi · novembre 2011

Super ça fonctionne !

J'ai carrément collé cette ligne dans header.php de mon thème.

<script type="text/javascript" src="http://lemanchot.fr/plugins/jquery/jquery.min.js"></script>

Est-ce la meilleure solution d'après toi ?

Merci encore pour ton aide !

danielsan · décembre 2011

hello,

le lien vers le téléchargement semble ne plus fonctionner ...
est-il possible de le mettre à jour ?

Merci !

Jerry Wham · décembre 2011

danielsan a écrit:

hello,

le lien vers le téléchargement semble ne plus fonctionner ...
est-il possible de le mettre à jour ?

Merci !

Voilà qui est fait. Désolé, mais c'est mon hébergeur qui ne supporte plus l'encodage des url.

danielsan · décembre 2011

merci !

Haruka · janvier 2012

Bonjour,

Je souhaiterai essayer ce plugin, mais je n'arrive pas à le voir dans l'administration sur la page des plugins. Je l'ai pourtant installer comme les autres. Une idée ?

Je suis sous PluXml 5.1.5

l e . n o x · janvier 2012

Bonsoir P3ter,

Essaye de regarder du coté des droits en "lecture / écriture" sur le dossier du plugin que tu viens d'uploader sur ton serveur.
Cela m'arrive souvant @+ ;O)

Wiksa · janvier 2012

Je confirme ne pas voir le plugin dans l'admin avec Pluxml 5.1.5. J'ai le même problème avec un autre plugin de Jerry.

Haruka · janvier 2012

l e . n o x a écrit:

Essaye de regarder du coté des droits en "lecture / écriture"

J'ai regardé, mais même avec tous les droits (umask à 777) sur le dossier du plugin, je ne le vois pas dans l'admin.

Haruka · janvier 2012

Jerry Wham une idée ?

Jerry Wham · janvier 2012

P3ter a écrit:

Jerry Wham une idée ?

Pas vraiment... Chez moi, quelle que soit la version de Pluxml > 5.1, le plugin fonctionne et est visible dans ma partie admin.

Quelle est la version du plugin que tu utilises? Vérifie que c'est bien celle-ci

Jerry Wham · janvier 2012

Je crois savoir ce qui se passe et je viens de modifier l'archive en conséquence : les éléments du plugins étaient mis dans l'archive directement, sans dossier pour les regrouper. Tu n'as pas dû tous les mettre ou tu as dû faire une faute d'orthographe dans le nom du dossier. Je ne vois que ça.

Pour corriger cela, télécharge à nouveau l'archive. Il devrait y avoir un dossier unique "syntaxhighlighter" que tu glisseras dans ton dossier "plugins" (supprime avant l'ancien dossier "syntaxhighlighter" que tu avais dû créer).

Je viens de tester avec pluxml 5.1.5 et l'archive en question et ça fonctionne.

danielsan · janvier 2012

Hello Jerry,
j'en profite pour un ptit truc, ça marche comment avec un code PHP+HTML ?
exemple avec la class :php et ce code:

<h2><?php echo plxUtils::strCheck($plxShow->plxMotor->aCats[$plxShow->plxMotor->cible]['name']) ?></h2>
<div class="cat_description"><?php echo plxUtils::strCheck($plxShow->catDescription()) ?></div>

ça me rajoute des trucs au niveau des <?php ... ?> je suis obligé de passer les "<" en ">" en ;lt / ;gt ...
Merci.

[plugin]syntaxhighlighter

Réponses