Notice: Undefined index: date_creation in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Undefined index: date_update in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743

Notice: Undefined index: thumbnail in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 733

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 733

Notice: Undefined index: thumbnail_title in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 734

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 734

Notice: Undefined index: thumbnail_alt in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 735

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 735

Notice: Undefined index: date_creation in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Undefined index: date_update in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743

Notice: Undefined index: date_creation in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 742

Notice: Undefined index: date_update in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743

Notice: Trying to access array offset on value of type null in /web5/cahue/www/pluGeek/core/lib/class.plx.motor.php on line 743
Le projet - PluGeek

Test plugin pluPrism

Rédigé par Cpalo Aucun commentaire
Classé dans : Le projet, La structure retenue Mots clés : aucun

Particularités m'ayant fait choisir Prism

C'est la balise <code>et non la balise<pre>qui est est affectée d'une classe.

Et l'une des particularités de Prism est que la classe utilisée est conforme aux spécifications W3C de l'élément <code> : elle commence par le mot-clé language-. Voici donc les différentes classes que j'ai choisi d'utiliser:

  • class="language-markup": concerne le HTML ou le XML.
  • class="language-css": concerne le code css.
  • class="language-markup": concerne le PHP.
  • class="language-javascript": concerne le code JavaScript.
  • class="language-java": concerne le code Java.

La reconnaissance de code intégré dans un autre langage est pris en charge également (CSS dans HTML ou JavaScript dans HTML par exemple).

Utilisation de Prism

Mais où placer ce code d'identification ? Fort logiquement, on pourra l'ajouter aux balises <code>. Mais une autre alternative, et c'est là encore un des grands atout de Prism, s'offre à vous. Vous pouvez indiquer un type de coloration syntaxique pour toute une partie de la page en plaçant la classe dans un des éléments ancêtre. Voici deux exemples fonctionnels qui seront plus parlant:

Identification dans les balises <code>

Coloration syntaxique de code HTML en plaçant l'identificateur dans chaque balise <code>. On constate que pour le bloc de code final, le balisage avec l'élément pre ne suffit pas, il doit contenir un élément code pour respecter les spécifications.

Le marquage de chaque balise <code> est relativement fastidieux dans ce cas. Il vaut mieux opter pour la solution proposée ci-après.

Identification dans une balise ancêtre

Ici, seule la balise <section> sera affublée de la classe language-markup ce qui entraînera la coloration de toutes les parties encadrées par la balise <code>. Beaucoup moins de travail, ne trouvez-vous pas ? Voici donc le même exemple avec la simplification proposée.

 
	@import url(http://fonts.googleapis.com/css?family=Questrial);
	@import url(http://fonts.googleapis.com/css?family=Arvo);
	@font-face {
		src: url(http://lea.verou.me/logo.otf);
		font-family: 'LeaVerou';
	}
	/*
	 Shared styles
	 */	 
	section h1,
	#features li strong,
	header h2,
	footer p {
		font: 100% Rockwell, Arvo, serif;
	}
	/*	
    #languages-list li[data-id="javascript"] {
		border-bottom: 1px solid #aaa;
		padding-bottom: 1em;
		margin-bottom: 1em;
		margin-right: 1em;
	}

Les plugins ajoutent des fonctionnalités supplémentaires à l'outil.

En voici trois que j'utilise:

Ressources

Premier edito

Rédigé par Cpalo Aucun commentaire
Classé dans : Le thème de base, Le projet Mots clés : PluXml

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lire la suite de Premier edito

Le Projet

Rédigé par Cpalo Aucun commentaire
Classé dans : Le projet, Les plugins Mots clés : PluXml

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lire la suite de Le Projet

Fil RSS des articles de cette catégorie