Tutoriels sur Joomla et la création de site

Afin de présenter des codes dans notre page web nous utilisons des balises <pre></pre> ou <code><code>. Quelle est la différence entre elles?

La balise <code><code> mettra en valeur votre code, mais il sera traité comme dans d'autres balises texte - tous les espaces supplémentaires, sauts de ligne ou tabulations seront supprimés.
<pre> - est l'abreviation de preformated, un texte apparaîtra exactement comme vous l'avez entré.

Règle générale: <code></code> Nous l'utilisons pour ajouter du code dans le texte et<pre></pre> lorsque nous voulons afficher code long.

Styles

Même si vous n'avez pas de style css, le texte à l'intérieur de ces balises est affiché avec une police monospace comme Menlo ou Monaco. Gantry 4 a déjà des styles définis pour les balises pre et code has already defined styles for pre and code tags, par exemple :

c'est un exemple de <code>

   Exemple de Code sur plusieurs lignes qui utilise les balises <pre> 
     $lists = array ();
         $lists['search'] = $search;
         $lists['order_Dir'] = $filter_order_Dir;
         $lists['order'] = $filter_order;

Il n'y a aucun problème avec javascript, les langages php / css, mais vous pouvez en avoir avec HTML ou XML. Nous devons remplacer les caractères "<" et ">" à l'aide des symboles mathématiques < (plus petit que) et > (plus grand que). Dans le cas contraire, ils seraient interprétés comme des balises html ordinaire.

Prettify (enjoliver)

SI vous étiez curieux de connaître à quoi sert le fichier prettify.less - le mystère est résolu. Essayez d'ajouter quelques codes<pre></pre>- comme dans l'exemple ci-dessous:

Résultat

<?phpecho 'Hello World';?>

Gantry 4 a intégré prettify.js. Pour l'appeler dans le header il suffit d'ajouter class="prettyprint" puisque vous avez déjà prettify.less. La classe "lang-xxx" définit le langage tels que css, php ou html et la class "linenums" ajoute des numéros de lignes. Vous pouvez également utiliser par exemple, .linenums:33 - alors la numérotation des lignes commence à partir de 33
Vous pouvez trouver ici plus d'informations sur prettify

Syntax Highlighter (surligneur de syntaxe)

Syntax Highlighter (SH) est probablement le plus populaire. Il ya aussi le plugin Jommla - codecitation avec SH mais n'est pas developpé depuis la version 1.6 de Joomla et utilise également la version 2.x de SH. La nouvelle version apporte un changement important pour l'utilisateur final. Dans la version 2 et inférieure, il n'était pas possible de se contenter de selectionner du code et de faire un copié/collé - le texte copié contient également des numéros de ligne. C'était effectué par un objet swf. Dans la version 3, vous pouvez double-cliquer pour selectionner tout le code et simplement copier/coller. C'est pourquoi - vous connaissez ce monstre de Gantry - Je l'ai intégré à mon template.

Comment fonctionne SH? Nous avons besoin du fichier shCore.js et de plusieurs autres fichiers js appelé brosses (brushes). Il existe de nombreuses brosses pour différents langages de programmation. Je vais utiliser dans ce tutoriel 5 brosses pour php, css, xml, js et sql. Si vous en voulez plus, vous pouvez améliorer le code ci-dessous.

Évidemment, les premiers champs

Maintenant notre fichier syntaxhighlighter.php