Derniers articles

Catégories

Bash Jquery Linux php PluXml Proxy Raspberry Pi ssh Tools Tunnel Unix


PluXml création d'un plugin

10 octobre 2012

Pour les besoins de ce blog il fallait un système qui puisse gérer la colorisation syntaxique de différents codes et proposer le copier coller du code. Le plugin Jquery Snippet fera l'affaire...


Le système de plugin de PluXml est très bien fait et simple mais nos modifications sont si modestes, à quoi bon alourdir la plume avec un plugin qui forcément va prendre de la ressource. Ce blog tournant sur un Raspberry ceci à son importance, toute relative j’admets...


Pour utiliser snippet il suffit donc d'éditer le fichier header.php ou le fichier correspondant et d'y ajouter quelques lignes, personnellement j’apprécie avoir mes différents fichiers css et js au même endroit, dans l'exemple ci-dessous les fichiers sont posés dans un dossier js dans le répertoire des plugins de pluxml.

<?php
	echo "\t".'<link rel="stylesheet" type="text/css" href="'.PLX_PLUGINS.'js/jquery.snippet.min.css"/>'."\n";
	echo "\t".'<script type="text/javascript" src="'.PLX_PLUGINS.'js/jquery.min.js"></script>'."\n";
	echo "\t".'<script type="text/javascript" src="'.PLX_PLUGINS.'js/jquery.snippet.min.js"></script>'."\n";
	echo "\t".'<script type="text/javascript" src="'.PLX_PLUGINS.'js/blogathome.js"></script>'."\n";
?>

Il faut également quelques lignes ou l'on va configurer les thèmes à utiliser et les différents effets. Perso tout mes codes js se trouvent dans le fichier blogathome.js listé ci-dessus.


Un exemple de directives pour appeler snippet:

$(document).ready(function(){

$("pre.htmlCode").snippet("html",{style:"vim-dark",clipboard:"/blog/plugins/snippet/ZeroClipboard.swf",showNum:false});

$("pre.styles").snippet("css",{style:"vim-dark",clipboard:"/blog/plugins/snippet/ZeroClipboard.swf",showNum:false});
	// Finds <pre> elements with the class "styles"
	// and snippet highlights the CSS code within
	// using the "vim-dark" styling.
	// without showing line numbers.

$("pre.js").snippet("javascript",{style:"vim-dark",clipboard:"/blog/plugins/snippet/ZeroClipboard.swf",showNum:true});
	

$("pre.dynamic").snippet("php",{style:"vim-dark",clipboard:"/blog/plugins/snippet/ZeroClipboard.swf",showNum:true});
		
});

Vous trouverez d'autres exemples sur le site de snippet.

Il suffit ensuite de mettre la class voulue à une balise <pre> afin de voir snippet faire son job...


exemple: Ceci est le code utiliser en haut de page...

<pre class="htmlCode">
&#60?php
	echo "\t".'&#60link rel="stylesheet" type="text/css" href="'.PLX_PLUGINS.'js/jquery.snippet.min.css"/&#62'."\n";
	echo "\t".'&#60script type="text/javascript" src="'.PLX_PLUGINS.'js/jquery.min.js"&#62&#60/script&#62'."\n";
	echo "\t".'&#60script type="text/javascript" src="'.PLX_PLUGINS.'js/jquery.snippet.min.js"&#62&#60/script&#62'."\n";
	echo "\t".'&#60script type="text/javascript" src="'.PLX_PLUGINS.'js/blogathome.js"&#62&#60/script&#62'."\n";
?&#62
</pre>

Ne pas oublier de remplacer les différents signes <> respectivement par, &#60 et &#62.

Classé dans : Accueil, Divers - Mots clés : PluXml, Jquery

Écrire un commentaire

Quelle est la deuxième lettre du mot csxq ? : 

Derniers articles

Catégories

Archives