SHExBrushes

SyntaxHighlighter Extended Brushes.

Brushes de coloration étendus pour le script SyntaxHighlighter 3 d'Alex Gorbatchev.
HTML5, CSS3, PHP5.5, Javascript.

Téléchargement »

Partager : FacebookTweetGoogle+

Info : Ce pack de brushes pour SyntaxHighlighter 3.x d'Alex Gorbatchev étend simplement les brushes originaux pour les langages suivants : HTML5 (brushe XML), CSS3 et SASS, PHP5.5, JavaScript et SQL. J'ai fait ça pour une utilisation personnelle mais autant les partager :) Vous trouverez la liste de toutes les améliorations plus bas. De manière générale, les brushes proposés apportent une meilleure visibilité du code.

Installation

Télécharger les brushes (.zip)

Extraire l'archive (shexbrushes.zip). Celle-ci contient deux dossiers : css et js. Copiez le contenu du dossier js pour le coller dans le répertoire contenant vos brushes pour SyntaxHighlighter. Vous devrez remplacer les brushes originaux s'ils sont déjà présents.

Styles supplémentaires

Ce pack de brushes étendus ajoute de nouvelles classes CSS pour étendre la coloration. Une grande partie sert uniquement à coloriser différemment les balises HTML suivant leur type (balises de listes, balises de formulaire, etc...). Si vous ne vous servez pas du brush HTML, vous pouvez ne pas en tenir compte (classes css *tag et *att, à partir de la ligne en surbrillance dans le code ci-dessous).
Copiez-collez le contenu du code ci-dessous dans le fichier de votre thème pour SyntaxHighlighter (i.e shThemeDefault.css par défaut).

.syntaxhighlighter .color4, .syntaxhighlighter .color4 a {
  color: #2a8596 !important;
}
.syntaxhighlighter .color5, .syntaxhighlighter .color5 a {
  color: #f90 !important;
}
.syntaxhighlighter .spechar {
  color: #00de1f !important;
}
.syntaxhighlighter .punct {
  color: white !important;
}
.syntaxhighlighter .digit {
  color: #c86021 !important;
}
.syntaxhighlighter .function {
  color: #9f3 !important;
}
/* Ci-dessous : HTML brush colors */
.syntaxhighlighter .anchortag {
  color: #9f3 !important;
}
.syntaxhighlighter .anchoratt {
  color: #00de1f !important;
}
.syntaxhighlighter .formtag {
  color: #f90 !important;
}
.syntaxhighlighter .formatt {
  color: #d98a14 !important;
}
.syntaxhighlighter .scripttag {
  color: #c02910 !important;
}
.syntaxhighlighter .scriptatt {
  color: #9e2815 !important;
}
.syntaxhighlighter .csstag {
  color: #dddd00 !important;
}
.syntaxhighlighter .cssatt {
  color: #caca19 !important;
}
.syntaxhighlighter .metatag {
  color: #dddd00 !important;
}
.syntaxhighlighter .metaatt {
  color: #caca19 !important;
}
.syntaxhighlighter .imgtag {
  color: #96f !important;
}
.syntaxhighlighter .imgatt {
  color: #8346fc !important;
}
.syntaxhighlighter .listtag {
  color: #e3de5f !important;
}
.syntaxhighlighter .listatt {
  color: #c6c25c !important;
}
.syntaxhighlighter .mediatag {
  color: #fcf !important;
}
.syntaxhighlighter .mediaatt {
  color: #f9f !important;
}
.syntaxhighlighter .tabletag {
  color: #06dec7 !important;
}
.syntaxhighlighter .tableatt {
  color: #00c4af !important;
}
.syntaxhighlighter .objtag {
  color: #3a87e7 !important;
}
.syntaxhighlighter .objatt {
  color: #2679e0 !important;
}

Vous devrez peut-être adapter les couleurs à votre thème. Mon thème perso, utilisé ici sur ce site, est inclus dans l'archive (dans le dossier css) et ne nécessite pas l'ajout des styles précédents.

Précisions

Quoi de neuf ?

Ci-dessous vous trouverez la liste de toutes les améliorations apportées sur les brushes présents dans ce pack.

shBrushCss.js shBrushSass.js

Mise à jour de la liste des propriétés CSS et de leurs valeurs pour la prise en charge de CSS3.
Mise à jour de la liste des unités de grandeurs.
Coloration spécifique pour les règles CSS @*.
Coloration spécifique pour certains caractères : { } ( ) , ; ..

shBrushJScript.js

Mise à jour de la liste des mots-clés réservés.
Coloration spécifique pour les regex javascript.
Coloration spécifique de caractères spéciaux.
Coloration spécifique des chaînes numériques.

shBrushPhp.js

Mise à jour de la liste des mots-clés réservés, des fonctions et des constantes pour la prise en charge complète de Php5.5.
Coloration spécifique pour certains mots-clés.
Coloration spécifique de caractères spéciaux.
Coloration spécifique des chaînes numériques.

shBrushXml.js

HTML : Coloration spécifique des balises et de leurs attributs en fonction de leur type.
Types: formulaires, images, liens, listes, médias, métas, objets, scripts, style, tables.
Prise en charge HTML5.

shBrushSql.js

Coloration spécifique de caractères spéciaux.
Coloration spécifique des chaînes numériques.

Conclusion

Les listes des propriétés CSS, des mots-clés et fonctions JavaScript et Php, et des balises et attributs HTML, sont normalement complètes et à jour au 1er Octobre 2013.

N'hésitez pas à commenter et partager cette page ;)

Crédits

Modifications effectuées par Robin Calmejane (nomadOnWeb)
SyntaxHighlighter par Alex Gorbatchev

License

Tout comme SyntaxHighlighter, ce plugin est distribué sous licence LGPL.

Partager : FacebookTweetGoogle+