Coloration syntaxique pour TYPO3

Présentation

EXL Contentelements est une extension proposant un panel de contenus TYPO3 divers et variés. Elle est basée sur l'API de wec_contentelements qui permet une création simplifiée de nouveaux types de contenus. (Pour en savoir plus rendez-vous sur cet article)

Le premier élément que j'ai réalisé est un plugin de coloration syntaxique. Il vous permet d'ajouter du code structuré et coloré dans vos pages TYPO3. Il est basé sur l'utilisation de SyntaxHighlighter, plugin JavaScript créé par Alex Gorbatchev.

Exemples

TypoScript

# Removes the default settings from css_styled_content
lib.stdheader >
lib.stdheader = TEXT
lib.stdheader.stdWrap {
   field = header
   typolink.parameter.field = header_link
}

HTML + JavaScript

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
</script>

<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>

Le plugin

Le contenu se présente de la manière suivante : 

Description des champs :

  • Language : Défini le langage que vous souhaitez afficher (HTML, CSS, JavaScript, PHP etc...)
  • HTML Script ? : Si votre code est contenu dans du HTML cochez cette case (Par exemple du PHP dans une page HTML)
  • Code : Collez ici le code que vous souhaitez afficher
  • Start at line : Si vous le souhaitez vous pouvez choisir le numéro de ligne de départ. C'est utile si vous souhaitez par exemple commenter un morceau de fichier en donnant précisément la ligne à laquelle se situe votre code. Dans l'exemple si dessus mon code HTML commence à la ligne 138.
  • Highlight lines : Vous pouvez mettre une ou plusieurs lignes en surbrillance, entrez les numéros de ligne séparés par des virgules. Dans l'exemple ci-dessus j'ai choisi de mettre en surbrillance la ligne 6 de mon code. 
commentaires générés par Disqus