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


Lire la suite de PluXml création d'un plugin

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

Derniers articles

Catégories

Archives