SyntaxHighlighter sur WordPress

Vous êtes codeur ? Vous voulez partager vos codes sur votre blog ?
HOW CODE ON WORDPRESS
Allez je m’y mets !

var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

context.translate(100,100);

context.strokeStyle = ‘#FF0000’; // rouge, évidemment
context.lineWidth = 5;

context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();

C’est bien gentil comme idée mais la syntaxe n’est pas représentée, puis c’est moche

Et bien sur wordpress deux solutions vous sont proposés :

1ère solution :

Vous sélectionnez le texte puis vous mettez en format Pré-formaté.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.translate(100,100);

context.strokeStyle = '#FF0000'; // rouge, évidemment
context.lineWidth = 5;

context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();

Mais là encore c’est pas génial,en plus « ça fait pas pro.

2e solution :

WordPress propose d’intégrer le plugin SyntaxHiglighter ! Vous voulez plus d’infos sur ce « plugin », allez  .

Normalement cela vous permet d’obtenir ce genre de rendu :

ça vous plaît ?🙂

Alors allons y ! C’est très simple  :

Vous écrivez entre crochets : sourcecode language= »langage choisi » Ici vous mettez n’importe quoi🙂 Puis à la fin de votre code vous mettez (encore entre crochets) :/sourcecode

Les langages supportés sont les suivants :

Bash — bash, sh
C++ — cpp, c, c++
C# — c#, c-sharp, csharp
CSS — css
Delphi — delphi, pascal
Diff — diff
Groovy — groovy
Java — java
JavaScript — js, jscript, javascript
Perl — perl, pl
PHP — php
Plain text — plain, text
Python — py, python
Ruby — rb, ruby, rails, ror
Scala — scala
SQL — sql
VB — vb, vb.net
XML/HTML — xml, html, xhtml, xslt

Donc voilà ce que cela va donner avec le morceau de programme proposé :

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.translate(100,100);

context.strokeStyle = '#FF0000'; // rouge, évidemment
context.lineWidth = 5;

context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();

ou encore selon la méthode décrite ici (info : le plugin est normalement déjà installé sur wordpress)

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.translate(100,100);

context.strokeStyle = '#FF0000'; // rouge, évidemment
context.lineWidth = 5;

context.beginPath();
context.arc(0, 0, 50, 90*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(0, 100, 50, 270*(Math.PI/180), 0*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 0, 50, Math.PI, 90*(Math.PI/180), false);
context.stroke();
context.closePath();

context.beginPath();
context.arc(100, 100, 50, 180*(Math.PI/180), 270*(Math.PI/180), false);
context.stroke();
context.closePath();

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s