Aujourd'hui une petite astuce pour les utilisateurs de blogger qui voudraient partager avec leurs lecteurs du code source.
Pour mettre en forme notre code source nous allons utiliser les feuilles de styles et classes javascript de notre bon ami Alex Gorbachev.
Installation du plugin
Pour ce faire allez dans votre interface de gestion de blogger, dans la partie Modèle.
Cliquez ensuite sur Modifier le code HTML.
Puis sur Traiter.
Recherchez ensuite la balise <head> et insérez juste après le code source suivant.
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
Pour en ajouter d'autres n'hésitez pas a regarder sur http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ pour rajouter les "Brushes" dont vous aurez besoin.
Utilisation dans vos posts
Une fois le plugin installer, pour rajouter une joulie mise en forme a votre code source, il faut aller dans l'onglet HTML en haut a gauche de votre écran d'édition de post.
Rajoutez a l'endroit voulu le code suivant (ici en java si vous voulez afficher du java) :
<pre class="brush: java"> //Mon code source ici </pre>
Et voila ! Votre code source s'affiche.
Cas particulier
Dans le cas du xml et du html, il faudra échapper les caractères particulier avant de le mettre entre les balises pre.
Pour ce faire je vous conseille ce site : http://www.reconn.us/component/option,com_wrapper/Itemid,62/
Il vous suffit alors d'entrer le code dans la zone de texte, de décocher les deux cases au dessous et de cliquer sur le bouton en bas Escape HTML Characters.
Surlignage de lignes
Vous pouvez aussi pour mettre en avant certaines lignes, surligner ces dernieres.
Pour se faire vous pouvez rajouter dans votre ligne pre après le bursh l'expression highlight: [x,y,z]
Pour surligner les lignes x, y et z.
De la façon suivante :
<pre class="brush: java;highlight: [1,3,7]">
//Mon code source ici
public class SecondActivity extends Activity{
Button monBouton;
EditText inputName;
EditText inputEmail;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.secondscreen);
monBouton = (Button) findViewById(R.id.button1);
inputEmail = (EditText) findViewById(R.id.mail);
}
}
</pre>
Ce qui donnera :
//Mon code source ici
public class SecondActivity extends Activity{
Button monBouton;
EditText inputName;
EditText inputEmail;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.secondscreen);
monBouton = (Button) findViewById(R.id.button1);
inputEmail = (EditText) findViewById(R.id.mail);
}
}
Voili voilou ! j'espère que j'aurai pu vous aider !
Aucun commentaire:
Enregistrer un commentaire