PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 27/07/2011 23:18:31

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

[plugin]syntaxhighlighter

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 tongue

Dernière modification par Jerry Wham (26/07/2012 15:29:54)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#2 02/08/2011 09:43:48

Johan
Membre
Lieu : Région parisienne
Inscription : 22/02/2011
Messages : 67
Site Web

Re : [plugin]syntaxhighlighter

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

Hors ligne

#3 02/08/2011 10:43:38

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#4 03/08/2011 07:26:09

Johan
Membre
Lieu : Région parisienne
Inscription : 22/02/2011
Messages : 67
Site Web

Re : [plugin]syntaxhighlighter

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 ?

Hors ligne

#5 03/08/2011 22:30:14

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

@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...

Dernière modification par Jerry Wham (09/08/2011 19:43:47)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#6 14/08/2011 17:47:33

l e . n o x
Membre
Inscription : 12/07/2011
Messages : 55

Re : [plugin]syntaxhighlighter

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)

Dernière modification par l e . n o x (14/08/2011 19:32:16)


Linux, y a moins bien.
Mais c'est plus cher. ;O)

Hors ligne

#7 15/08/2011 23:36:04

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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é ???


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#8 23/08/2011 17:56:30

Bloody
Membre
Lieu : Finistère, Strawberry's field
Inscription : 04/04/2011
Messages : 296
Site Web

Re : [plugin]syntaxhighlighter

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

http://portfolio.chantdeleau.com/articl … syntaxique

Hors ligne

#9 25/08/2011 21:07:51

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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)...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#10 16/11/2011 01:19:29

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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 ! big_smile

Hors ligne

#11 16/11/2011 01:27:52

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#12 16/11/2011 10:37:49

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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 sad

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

Hors ligne

#13 16/11/2011 13:20:28

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#14 16/11/2011 13:43:59

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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

Merci

Hors ligne

#15 16/11/2011 18:33:32

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#16 16/11/2011 20:16:05

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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 sad

Hors ligne

#17 16/11/2011 23:07:28

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#18 17/11/2011 09:53:06

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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. big_smile

Dernière modification par kiyoshi (17/11/2011 22:01:02)

Hors ligne

#19 17/11/2011 11:41:35

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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>

Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#20 17/11/2011 22:22:46

kiyoshi
Membre
Inscription : 07/11/2011
Messages : 20

Re : [plugin]syntaxhighlighter

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 !

Dernière modification par kiyoshi (17/11/2011 22:47:47)

Hors ligne

#21 10/12/2011 23:49:54

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 274

Re : [plugin]syntaxhighlighter

hello,

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

Merci !


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#22 11/12/2011 02:29:55

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 426
Site Web

Re : [plugin]syntaxhighlighter

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.

Dernière modification par Jerry Wham (11/12/2011 21:16:10)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#23 11/12/2011 15:43:42

danielsan
Membre
Lieu : Montpellier
Inscription : 18/07/2011
Messages : 1 274

Re : [plugin]syntaxhighlighter

merci !


Que l'inspiration soit avec vous, à jamais !

Hors ligne

#24 07/01/2012 15:14:30

P3ter
Pluxml Staff
Lieu : Ile De France
Inscription : 17/10/2011
Messages : 269
Site Web

Re : [plugin]syntaxhighlighter

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 ? :s

Je suis sous PluXml 5.1.5

Dernière modification par P3ter (07/01/2012 15:56:15)


PluXml sur Twitter : @pluxml
PluXml sur Google+ : +pluXml
--
Mon Twitter : @p3terfr
Mon blog : p3ter.fr

Hors ligne

#25 07/01/2012 23:20:59

l e . n o x
Membre
Inscription : 12/07/2011
Messages : 55

Re : [plugin]syntaxhighlighter

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)

Dernière modification par l e . n o x (07/01/2012 23:21:17)


Linux, y a moins bien.
Mais c'est plus cher. ;O)

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés