ALLES ÜBER jm_highlightjs UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

jm_highlightjs

Typo3 Syntax-Hervorhebung mit highlight.js

Dies ist eine Typo3-Erweiterung, die die Javascript-basierte Syntaxhervorhebung integriert library highlight.js in Typo3's RTE. Mit diesem erweiterung können Redakteure leicht Codeausschnitte in jedes RTE-Inhaltselement einfügen oder feld, das bis zu 150 unterstützte Sprachen und mehrere Stile verwendet

Das Rendering erfolgt entweder im Browser oder, falls gewünscht, serverseitig mittels die PHP-Erweiterung v8js.

Abhängigkeiten

  • Typo3 v7.x
  • PHP-Erweiterung v8js (optional)

Screenshots

Auswahl der zu verwendenden Codesprache in RTE

Resultierendes Frontend-Rendering

Installation & Konfiguration

  1. Installieren Sie die Erweiterung von TER.
  2. Hinzufügen der mitgelieferten PageTS Typoscript-Vorlage EXT:jm_highlightjs - Syntaxhervorhebung in RTE aktivieren zu Ihrem root page, um das Pre-Tag innerhalb von RTE zu aktivieren und CSS-Klassen hinzuzufügen für alle unterstützten Sprachen.
  3. Fügen Sie die Typoscript-Vorlage Highlight.js-basierte Syntaxhervorhebung zu Ihrem Frontend hinzu Typoscript-Vorlage.
  4. Fügen Sie einen neuen Vorblock (d.h. vorformatierten Text) in das Inhaltselement Ihrer Wahl ein und fügen Sie Ihren Quellcode in den Block ein (Empfehlung: Tabulatoren statt Leerzeichen verwenden) um Ihren Code zu formatieren und nur sauberen Code einzufügen, um zusätzliche Formatierungsschritte in RTE zu vermeiden)
  5. Laden Sie die Seite mit diesem Inhaltselement im Frontend neu.

Verwalten einer Reihe von unterstützten Sprachen

Standardmäßig werden nur die gängigen Sprachen unterstützt (um die Größe der highlight.js zu reduzieren) bibliotheksdatei). Um die Unterstützung für alle 150 Sprachen zu aktivieren, stellen Sie Folgendes ein

plugin.tx_jmhighlightjs.library = EXT:jm_highlightjs/Ressourcen/Public/Javascript/Highlight.all.min.js

Wenn Sie nur eine bestimmte Teilmenge von Sprachen benötigen, können Sie ein eigenes Javascript erstellen ressource für diese Sprachen unter https://highlightjs.org/download/, speichern Sie sie irgendwo unter ihren Webserver (z.B. unter fileadmin/) und konfigurieren Sie plugin.tx_jmhighlightjs.library so dass es auf diese Datei zeigt.

Styling ändern

Highlight.js wird mit einer Sammlung von 74 verschiedenen Code Highlighting Styles geliefert. Sie können konfigurieren einen anderen Style durch die Typoscript-Konstante plugin.tx_jmhighlightjs.stylesheet, z.B um den Stil von default.css auf androidstudio.css zu ändern

plugin.tx_jmhighlightjs.stylesheet = EXT:jm_highlightjs/Ressourcen/Public/CSS/androidstudio.css

Besuchen Sie https://highlightjs.org/static/demo/, um die verfügbaren Styles auszuprobieren.

Serverseitiges Rendering aktivieren

Standardmäßig ist diese Erweiterung so konfiguriert, dass sie die Syntax-Hervorhebung auf der Clientseite durchführt. Wenn du die PHP-Erweiterung v8js installiert hast können Sie diesen Modus auf serverseitiges Rendering umstellen. Setzen Sie einfach die Typoscript-Konstante

plugin.tx_jmhighlightjs.enablev8js = 1

Bekannte Probleme

  • Die Formatierung mit Leerzeichen (anstelle von Tabs) funktioniert nicht richtig, da RTE alle Daten eliminiert whitespace-Sequenzen mit mehr als einem Whitespace.
  • Man kann einem einzigen Codeblock mehrere Sprachtypen zuweisen, was zu Verwirrung führen kann (insbesondere im serverseitigen Rendering-Modus).

TODOs

  • Unterstützung für die Hervorhebung der Typoscript-Syntax hinzugefügt

Lizenz

Copyright (c) 2016, Jens Mittag Alle Rechte vorbehalten.

Weiterverbreitung und Nutzung der Typo3-Erweiterung'jm_highlightjs' in der Quelle und binäre Formen, mit oder ohne Modifikation, sind zulässig, vorausgesetzt, dass dass die folgenden Bedingungen erfüllt sind:

  • Die Weitergabe von Quellcode muss das obige Copyright behalten hinweis, diese Liste der Bedingungen und den folgenden Haftungsausschluss.
    • Weiterverteilungen in binärer Form müssen das obige Copyright wiedergeben hinweis, diese Auflistung der Bedingungen und den folgenden Haftungsausschluss in der Datenschutzerklärung dokumentation und/oder andere Materialien, die mit der Distribution geliefert werden.
    • Weder der Name der highlight.js noch die Namen ihrer Mitwirkenden kann verwendet werden, um Produkte zu unterstützen oder zu bewerben, die von dieser Software abgeleitet sind ohne ausdrückliche vorherige schriftliche Genehmigung.

DIESE SOFTWARE WIRD VON DEN REGENTS UND MITWIRKENDEN ``AS IS''' UND ALLEN ANDEREN BEREITGESTELLT AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GARANTIEN, EINSCHLIEßLICH, ABER NICHT BESCHRÄNKT AUF DIE STILLSCHWEIGENDEN GARANTIEN GARANTIEN DER MARKTGÄNGIGKEIT UND DER EIGNUNG FÜR EINEN BESTIMMTEN ZWECK SIND HAFTUNGSAUSSCHLUSS. UNTER KEINEN UMSTÄNDEN HAFTEN DIE REGENTS UND BEITRAGSZAHLER FÜR IRGENDWELCHE DIREKTE, INDIREKTE, ZUFÄLLIGE, BESONDERE, EXEMPLARISCHE ODER FOLGESCHÄDEN (EINSCHLIEßLICH, ABER NICHT BESCHRÄNKT AUF, DIE BESCHAFFUNG VON ERSATZWAREN ODER -DIENSTLEISTUNGEN; NUTZUNGSAUSFALL, DATEN- ODER GEWINNAUSFALL ODER BETRIEBSUNTERBRECHUNG), JEDOCH VERURSACHT UND ÜBER JEDE THEORIE DER HAFTUNG, SEI ES AUS VERTRAG, VERSCHULDENSUNABHÄNGIGER HAFTUNG ODER UNERLAUBTER HANDLUNG (EINSCHLIEßLICH FAHRLÄSSIGKEIT ODER ANDERWEITIG), DIE SICH IN IRGENDEINER WEISE AUS DER NUTZUNG DIESER WEBSITE ERGEBEN SOFTWARE, AUCH WENN SIE AUF DIE MÖGLICHKEIT SOLCHER SCHÄDEN HINGEWIESEN WIRD.

Die Typo3-Erweiterung'jm_highlightjs' verwendet die Javascript-Bibliothek'highlight.js' Version 9.2.0 von Ivan Sagalaev. Bitte lesen Sie "Ressourcen/Public/Javascript/LICENSE" für die Lizenzierung von Details der 'highlight.js'.

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:JM_HIGHLIGHTJS ist auf

0 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 7.6.x Installationen installiert

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen JM_HIGHLIGHTJS zu

  • 0 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 100 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen JM_HIGHLIGHTJS zu

  • 0 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 0 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 0 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 100 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 0 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=36680 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.

[wpforms id="1559"]