Utiliser pre & code pour ajouter du code.

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:

<pre class="prettyprint lang-php linenums">

<?php

echo 'Hello World';

?>

</pre>

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

<fields name="syntaxhighlighter" type="chain" label="SYNTAX_HIGHLIGTHER">

<field name="syntaxhighlighterstyle" type="selectbox" label="SYNTAX_STYLE" default="Default">

<option value="Default">Default</option>

<option value="Django">Django</option>

<option value="Eclipse">Eclipse</option>

<option value="Emacs">Emacs</option>

<option value="FadeToGrey">FadeToGrey</option>

<option value="MDUltra">MDUltra</option>

<option value="Midnight">Midnight</option>

<option value="RDark">RDark</option>

</field>

<field name="css" type="toggle" default="0" label="CSS"/>

<field name="php" type="toggle" default="0" label="PHP"/>

<field name="xml" type="toggle" default="0" label="XML"/>

<field name="java" type="toggle" default="0" label="JAVA_SCRIPT"/>

<field name="sql" type="toggle" default="0" label="SQL"/>

</fields>

Maintenant notre fichier syntaxhighlighter.php

<?php

/**

* @package gantry

* @subpackage features

* @version 4

* @author Marcin Paczkowski

* @license do whatever you want :)))

*/

defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');

class GantryFeatureSyntaxHighlighter extends GantryFeature {

var $_feature_name = 'syntaxhighlighter';

function isEnabled()

{

global $gantry;

$css_enabled = $gantry->get('syntaxhighlighter-css');

$java_enabled = $gantry->get('syntaxhighlighter-java');

$php_enabled = $gantry->get('syntaxhighlighter-php');

$xml_enabled = $gantry->get('syntaxhighlighter-xml');

$sql_enabled = $gantry->get('syntaxhighlighter-sql');

if (1 == (int)$css_enabled || 1 == (int)$java_enabled || 1 == (int)$php_enabled

|| 1 == (int)$xml_enabled || 1 == (int)$sql_enabled ) return true;

return false;

}

function init() {

global $gantry;

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";

$gantry->addLess($SHFolderless. "/shCore.less");

$gantry->addLess($SHFolderless. "/shCore".$gantry->get('syntaxhighlighter-syntaxhighlighterstyle').".less");

$gantry->addScript($SHFolderjs . "/shCore.js");

$gantry->addInlineScript('SyntaxHighlighter.all();');

if ($gantry->get('syntaxhighlighter-php')){

$gantry->addScript($SHFolderjs . "/shBrushPhp.js");}

if ($gantry->get('syntaxhighlighter-css')){

$gantry->addScript($SHFolderjs . "/shBrushCss.js");}

if ($gantry->get('syntaxhighlighter-xml')){

$gantry->addScript($SHFolderjs . "/shBrushXml.js");}

if ($gantry->get('syntaxhighlighter-java')){

$gantry->addScript($SHFolderjs . "/shBrushJScript.js");}

if ($gantry->get('syntaxhighlighter-sql')){

$gantry->addScript($SHFolderjs . "/shBrushSql.js");}

}

Explication du code

J'ai utilisé la fonction isEnabled() et à l'intérieur simple condition vérifiant si n'importe quel brosse est "ON" (activée). Un tel code permets d'éviter un interrupeteur supplémentaire pour l'ensemble de la fonctionnalité.Such code let avoid to add additional toggle for whole feature - Si n'importe quel brosse est « ON » l'ensemble de la fonction sera exécutée.

Lors de la création de nouvelles fonctionnalités, j'essaie de garder une structure de dossiers compatibles. Quand j'ajoute un fichier unique js ou css (less), J'ai juste à ajouter au dossier principal comme /js, /less ou /css mais s'il y en a plus je créer un nouveau dossier pour eux. Si nous faisons cela, nous devons montrer à Gantry ce nouveau dossier sinon il recherchera dans les dossiers principaux. Pour cela il existe les variables $SHFolderjs $SHFolderless pour les fichiers js et less .

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";

JURI::root(true) est la méthode Joomla pour retourner à la racine de notre site. Je pourrais utiliser tout simplement JURI::root(true)."/templates/gantry/js/SH";. Pourquoi j'ai utilisé un autre code ? Parce que maintenant ce code est plus sophistiqué et semble plus sérieux :)). Je plaisante bien sûr. Vous pouvez trouver dans les variables de dossiers un nouveau champ "template_new_name". J'ai créé ce champ et je m'en sers en plusieurs endroits: chemins d'accès aux nouveaux dossiers, ma propre marque de fabrique de mes fonctionnalités (pas dans ce blog, mais dans d'autres projets) et dans l'onglet Aperçu dans le gestionnaire deTemplate Manager pour afficher le nom du template. La raison est très simple: si je décide de publier ce template avec un nouveau nom il suffit de changer la valeur dans ce champs et les chemins et autres champs seront automatiquement mis à jour. Je suis juste paresseux.

Vous souhaitez savoir comment changer le branding ou l'aperçu du template? - Laissez un commentaire ci-dessous.

Si vous souhaitez utiliser ma méthode ouvrez template-options.xml, trouvez la ligne 15 et ajoutez en-dessous:

<field name="template_new_name" type="hidden" default="Gantry"/>

Si vous voulez rester fidèles aux paramètres par défaut Remplacez ces 2 lignes par:

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/less/SH";

Comment utiliser la coloration syntaxique (Syntax Highlighter )?

Nous utilisons class="brush:brushname" et brushnames : css, php, xml (aussi pour html), sql and js. Il existe beaucoup plus de brosses et vous pouvez améliorer le script pour les utiliser.

D'autres classes:
"gutter:false" - pas de numéros de lignes
"first-line: 10" - numérotation des lignes partira de 10
"highlight: 2" - ligne 2 sera mis en évidence
"highlight: [1, 3]" - lignes 1 et 3 seront mis en évidence

L'auteur de la coloration syntaxique est Alex Gorbatchev. Plus d'informations et de brosses vous les trouverez : ici

Ci-dessous vous trouverez le lien de téléchargement

créez les champs
copiez syntaxhighlighter.php file vers ../templates/gantry/features folder
copiez SH folder from /js folder vers ../templates/gantry/js folder
copiez SH folder from /less folder vers ../templates/gantry/less folder
créez le champ <field name="template_new_name" type="hidden" default="Gantry"/> ou changez le code de la fonction form aux lignes 39 et 40.

Documentation française sur le framework Gantry

Utiliser pre & code pour ajouter du code.

Styles

Prettify (enjoliver)

Syntax Highlighter (surligneur de syntaxe)

Comment utiliser la coloration syntaxique (Syntax Highlighter )?