beautyOfCode Syntax Highlighter als TYPO3 Extension veröffentlicht

07. Februar 2010, Felix Nagel in TYPO3, jQuery, Open Source, English

Please click here for an English version of this article.

 

 

Seit diesem Wochenende ist meine erste TYPO3 Extension im TER verfügbar: beautyOfCode Syntax Highlighter

 

Diese Extension nutzt das jQuery Plugin beautyOfCode von Lars Corneliussen um das mittlerweile recht bekannte Syntax Highlighter 2.0 von Alex Gorbatchev zu implementieren. Bekannt deshalb weil es von einigen Größen eingesetzt wird: wordpress.com, Aptana, Mozilla Developer Center, SitePoint und das Yahoo Developer Network gehören dazu.

 

Der Quellcode wird XHTML 1.0 Strict kompatibel auf der Webseite eingebettet und per Java-Script gehighlighted. Die RegEx Anweisungen und die Stylesheets die für die verschiedenen Sprachen werden per lazy-loading nachgeladen.

 

Es gibt einige nette Features wie Zeilenumbruch, Zeilen einfärben, Code einklappen, Tabulator Länge bestimmen und eine Toolbar, aber seht am besten selbst:

 

												function main($content,$conf) {
												$this->conf=$conf;
												$this->pi_setPiVarDefaults();
												$this->pi_loadLL();
												// parse XML data into php array
												$this->pi_initPIflexForm();
												return $content;
												}
												
Beispiel PHP Code

Dabei sind verschiedene Programmiersprachen (zur Zeit werden Actionscript 3, Bash, Shell, ColdFusion", C, C++, C#, CSS, Delphi, Pas, Pascal, Diff, Patch, Erlang, Groovy, Java, Java FX, Java-Script, Perl, PHP, Power-Shell, Python, Ruby on Rails, Scala, SQL, Typoscript, MySQL, Virtual Basic, .Net, XML, XSLT, XHTML und HTML mitgeliefert.) und visuelle Hervorhebungen (sogenannte Themes) verfügbar. Einige weitere Feauteres (Tabulator-Größe, Zeilenumbruch, Toolbar, etc.) können konfiguriert werden.

 

Typoscript war bisher nicht verfügbar, dieser sogenannte Brush wurde von mir erstellt --  Feedback ist willkommen. Er basiert auf den Keywords einer UserLanguage Typoscript für Notepad++.

											<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/file.ts">
											# Kommentar einzeilig
											config {
											xmlprologue = xml_11
											xhtmlDoctype = xhtml_strict
											xhtml_cleaning = all
											// Reihenfolge von Doctype und XML-Prolog beim Internet Explorer tauschen
											[browser = msie]
											config.doctypeSwitch = 1
											[else]
											config.doctypeSwitch = 0
											[end]
											page = PAGE
											plugin.tx_templavoila_pi1.disableExplosivePreview = 1
											page.25 < plugin.tx_templavoila_pi1
											page.25.userFunc = tx_templavoila_pi1->main_page
											
Beispiel Typoscript Code

Für Verbesserungsvorschläge bin ich jederzeit offen. Die Extension ist im Ter noch nicht in der aktuellsten Version verfügbar, kann aber weiter unten heruntergeladen werden. Dort findet sich auch der Typoscript Brush für SyntaxHighlighter 2.0.

 

 

beautyofcode im TYPO3 Extension Ter

English Version

beautyOfCode Syntax Highlighter (which is my first extension release into the TER)  provides state-of-the-art syntax highlighting by using Java-Script. The jQuery plugin beautyOfCodbye  by Lars Corneliussen is used to implement  Syntax Highlighter 2.0 by Alex Gorbatchev.

 

All RegEx Java-Script files (so called brushes), which determine highlighting of keywords, and the CSS sytles (so called themes) are lazy-loaded after the page has finished loading.

 

The following features are included: show gutter, customizable tab size, configurable label, collapse code, wrap lines, a toolbar ( with print in FE view, copy to directly to clipboard (via swf) and copy manually out of an pop-up).

 

 

The following programming languages are available Actionscript 3, Bash, Shell, ColdFusion", C, C++, C#, CSS, Delphi, Pas, Pascal, Diff, Patch, Erlang, Groovy, Java, Java FX, Java-Script, Perl, PHP, Power-Shell, Python, Ruby on Rails, Scala, SQL, Typoscript, MySQL, Virtual Basic, .Net, XML, XSLT, XHTML and HTML.

 

I created a TypoScript brush (based upon UserLanguage Typoscript for Notepad++) because this was one of the hardly existing missing brushes for Syntax Highlighter 2.0.

 

As the current version isnt avaiable in the TER yet, you can download both (the extension and the brush) below. 

 

 

 

beautyofcode im TYPO3 Extension Ter

 

 

 

Please use link to TER above, as these links are outdated!

Bitte nutzt den Downloadlink im TER, diese Version ist alt!

Download

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

8 Kommentare

Daniel

21. März 2011

Guter Ersatz für die GeSHi Lib

Hallo Felix,

Danke für die Extension! Definitiv ein sehr sauberer Ersatz für de GeSHi Lib.

 

Gruß

Daniel


Silaz

05. August 2010

Vollständigkeitshalber

Soo,

besten dank für deine Hilfe, und an den Rest: Ich doof hab die Pfade verbaselt :(


Super Extension, Danke :)


Felix Nagel

05. August 2010

@Silaz

Gerne versuch ich zu helfen, aber da brauch ich mehr Infos:


Hast du einen Link für mich? Das wäre am einfachsten. Oder vielleicht kannst du mir die Seite abspeichern und zusenden?


Ansonsten:

Static Template eingebunden?

Gibt pi1 den Code aus?

Welche JS Dateien werden eingebunden wenn du JS im Browser abschaltest, welche werden zusätzlich nachgeladen wenn JS eingeschaltet ist?


Silaz

05. August 2010

Hallo Felix,

erstmal danke für deine Arbeit.

Leider funktioniert die Extension bei mir nicht wirklich,

ich bekomme nach dem ich alles Installiert habe in der

Fehlerconsole "SyntaxHighlighter not defined"

Ich nutze t3jquery 0.4.3, beautyofcode 0.4.1, TYPO3 4.3.3


Wäre super wenn du mir da helfen könntest.


Gruss

Silaz


thefox

21. Juni 2010

Prima Extension!

Habe diese soeben auf meiner Seite eingebunden und klappt bestens! Meiner Meinung nach sauber gelöst, das so gut wie alles ( Pfade, JS-Dateien, typoscript Wrap's ) konfigurierbar ist. Super gemacht, vielen Dank!


Sargo Darya

21. Juni 2010

Mich wundert es eigentlich, dass du damit noch nicht so viele Downloads hast. Ich werd schauen dass ich das nachher mal ausgiebig nach dem Templatebau teste. Gibt auf jeden Fall einen kleinen Eintrag darüber wenns soweit fertig ist ;)


Felix Nagel

21. Juni 2010

Danke, über den Kommentar hab ich mich sehr gefreut. Bis dato hab ich kaum Feedback / Downloads bekommen.


Mir gings ganz genauso -- ich hatte Alex Plugin per HTML FCE genutzt und wollte dann irgendwann mehr Optionen. Wieso die Leute immer noch Geshi einsetzen ist mit auch ein Rätsel. Schließlich ist das Teil ein Performance Killer, SEO technisch ne Katastrophe und, vor allem, hässlich wie die Nacht.


ps: Schau auf jeden Fall das du die neuste Version aus dem TER nimmst, die hier verlinkte ist nicht mehr aktuell!


Sargo Darya

21. Juni 2010

Wow, genau das was ich gesucht hab.

Dank dir für die Extension. War die ganze Zeit auf der Suche nach etwas was die Syntax Lib vom Alex benutzt. Bin immer nur auf die GeSHi Lib gestoßen und die ist was Syntax Highlighting angeht echt nicht so toll.