LE BLOG DU YIN-YIN

Lire la suite ici… »

J’ai du coup regardé les plugins cités dans l’article plus en détail. Et là j’ai retenu SyntaxHighlighter Plus qui m’a plu pour son rendu, sa facilité d’utilisation et les options qu’il propose.

SyntaxHighlighter plus vous permet de mettre facilement en évidence la syntaxe de codes, sans perdre sa mise en forme et permet la saisie dans l’éditeur html sans avoir à remplacer les symboles et caractères par leur code html.

Voici quelques exemples:

En langage php

	function BBCodeToHTML( $content ) {
if ( !$this->CheckForBBCode( $content ) ) return $content;

$matches = $this->GetBBCode( $content );

if ( empty($matches) ) return $content; // No BBCode found, we can stop here

// Loop through each match and replace the BBCode with HTML
foreach ( (array) $matches as $match ) {
$language = strtolower( $match[4] );
$content = str_replace( $match[0], '<pre class="syntax-highlight:' . $language . "">" . htmlspecialchars( $match[5] ) . "</pre>", $content );
$this->jsfiles2load[$this->languages[$language]] = TRUE;
}

return $content;
}

En langage css

.dp-highlighter
{
font-family: "Consolas", "Courier New", Courier, mono;
font-size: 12px;
background-color: #E7E5DC;
width: 530px;
margin: 18px 0 18px 0;
padding-top: 1px;/* adds a little border on top when controls are hidden */
overflow: auto;

/* fixes for IE: "overflow: auto" causes unnecessary vertical bar */
/* corrects bottom scroll bar overlapping */
overflow-y: hidden;
padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
}

Il supporte les langues suivantes (l’alias pour une utilisation dans un article est indiqué à côté du nom):

• Bash — bash, sh
• C++ — cpp, c, c++
• C# — c#, c-sharp, csharp
• CSS — css
• Delphi — delphi, pascal
• Java — java
• JavaScript — js, jscript, javascript
• PHP — php
• Python — py, python
• Ruby — rb, ruby, rails, ror
• SQL — sql
• VB — vb, vb.net
• XML/HTML — xml, html, xhtml, xslt

La saisie est très simple. Il suffit d’entourer votre code à mettre en valeur par une des balises suivantes. Les caractères gras sont exclusifs à SyntaxHighlighter Plus. En outre, les guillemets autour de la langue ne sont pas obligatoires :

• [source language=’css’] … [/source]
• [code language=’css’] … [/code]
• [sourcecode lang=’css’] … [/sourcecode]
• [source lang=’css’] … [/source]
• [code lang=’css’] … [/code]
• [sourcecode=’css’] … [/sourcecode]
• [source=’css’] … [/source]
• [code=’css’] … [/code]
• [lang=’css’] … [/lang]
• [css] … [/css]

Ce qui m’intéresse aussi beaucoup avec ce plugin ce sont les fonctions d’affichage au format texte dans une fenêtre pop-up (view plain), la copie direct du contenu du code dans le presse papier (copy to clipboard) et le fonction d’impression (print).

Cela permet, lorsque vous voulez recopier du code pour l’insérer dans vos fichiers personnels, de ne pas faire d’erreur de sélection ou de recopie du code (si moi je n’en fais pas à la saisie lol ).

Testez avec le texte ci dessous

Moi j'adore insérer des balises partout et leur ajouter des classes:
<div id="class1">Class1</div>
<p class="class2">Class2</p>

Voilou @ peluche…

« Réduire