What does it do? 

This plugin provides state-of-the-art syntax highlighting by using JavaScript by using SyntaxHighlighting 3.x by Alex Gorbatchev or the prism syntax highlighter written by Lea Verou.

Use the constant editor or TS to define needed programming languages. These will be available in the FE plugin which needs to be added as a generic FE plugin (“insert plugin”). Each of this languages is a lazy-loaded (after the page has finished loading) Java-Script file. You can define different css styles (so called themes) and HTML templates to match your page design.

The following programming languages are available:

Features 

• Highlight specific lines
• Show Gutter
• Customizable tab size *
• Configurable label
• Collapse code *
• Wrap lines *
• Preview and t3editor support in BE
• Use HTML templating
• Different visual styles
• Show sourcecode from a local file or an external URL

* unavailable if using prism

Live Demo 

ext:beautyofcode Live Demo

Please help me to add more sites here: contact me!

SyntaxHighlighter 

SyntaxHighlighter 3.0 by Alex Gorbatchev, which does the actually highlighting, is the nicest syntax highlighter I've seen so far and it's also used by Freshbooks, ASP .Net Forums, wordpress.com, Aptana, Mozilla Developer Center, SitePoint and Yahoo Developer Network. It is coded in native JavaScript and is no longer under active development.

Please see https://github.com/syntaxhighlighter/syntaxhighlighter for more information.

Prism 

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's a spin-off from Dabblet and is tested there daily by thousands.

See http://prismjs.com/ for more information.

Screenshots 

See highlighter project website for possible frontend look.

Tab: beautyOfCode 

These fields should be self explanatory.

• Description (not necessary, if empty no description is displayed)
• Programming language (available languages configured by your admin)
• URL / File (use a local file or external URL with sourcecode) OR
• Sourcecode

Tab: Options 

Within this tab its possible:

• Highlight specific lines. Use a syntax like: 1,2,3,4,5 or 1-5
• Overwrite the default settings configured by your admin
• Gutter (show line numbers)
• Collapse (displays code element collapsed)

Please note: Configuration overwrite via the Option tab could be disabled by your admin.

Installation 

• Install the extension via extension manager.
• Add the static template in your main typoscript (go to: list module, edit your TS template, tab: includes, add one of the static templates named “beautyOfCode”).
• Depending on your configuration you must add the jQuery core file yourself.

Configuration 

Enable syntax highlighting (install EXT: t3editor) in BE by using enable_t3editor option.

FAQ 

$TYPO3_CONF_VARS['BE']['flexformForceCDATA']  = '1';

TCEFORM.tt_content.beautyofcode_cGutter.disabled = 1
TCEFORM.tt_content.beautyofcode_cCollapse.disabled = 1

TypoScript Reference 

7.x to 8.0 

What you need to know:

• Added support for TYPO3 14
• Remove support for TYPO3 13.x
• Fix some deprecations

7.0 to 7.2 

What you need to know:

• Added PHP 8.4 support
• Fixed BE preview in TYPO3 v13 when CSP is enabled
• Deprecation free (in TYPO3 v13)
• Migrated docs to PHP rendering
• Minor fixes and improvements
• Improved code quality / CGL

6.x to 7.0 

What you need to know:

• Added support for TYPO3 13 LTS
• Added PHP 8.3 support
• Removed support for TYPO3 11.x and 12.x
• Support for site sets
• Lots of fixed deprecations
• Improved code quality / CGL

5.x to 6.0 

What you need to know:

• Added support for TYPO3 12 LTS
• Added PHP 8.2 support
• Removed support for TYPO3 10.x
• Support for composer installer v4 (/_assets folder)
• Removed custom asset view helpers (now using core VHs instead)
• Removed obsolete ext_update class
• Replaced BE preview hook
• Improved code quality / CGL

5.1 to 5.2 

What you need to know:

• Added PHP 8.1 support
• Removed PHP < 7.4 support
• Improved code quality / CGL

5.0 to 5.1 

What you need to know:

• Updated Prism to 1.25.0

4.x to 5.0 

What you need to know:

• Added support for TYPO3 10.5 LTS
• Support for PHP 8.0
• Removed support for TYPO3 9.x
• Code clean up and code improvements

4.2 to 4.3 

What you need to know:

• Add YAML support for SyntaxHighlighter
• Removed support for PHP < 7.2
• Code clean up and improvements
• Bugfix for TCA issue when deleting a page
• Minor bugfixes

4.1 to 4.2 

What you need to know:

• Added support for TYPO3 10.4 LTS
• Support for PHP 7.3 and 7.4
• Automated CGL and unit tests using Github Actions
• Fix TSconfig inclusion (thanks to @tritum and @tritumBj)
• Rename TS and TSconfig files to newer file extensions
• Move TSconfig file to correct folder
• Minor fixes and clean up

4.x to 4.1 

What you need to know:

• Added support for TYPO3 10.2
• New extension icon
• Minor fixes and clean up

3.x to 4.0 

_Thanks to Sebastian Fischer for all the work on this release!_

What you need to know:

• Additional input field for URLs or reference files
• Added support for TYPO3 9.x
• Removed support for TYPO3 8.x
• Removed support for PHP 5.x
• Updated Prism to 1.17.1
• Changed namespace to FelixNagel
• Extension is now available on Packagist

3.2 to 3.3 

What you need to know:

• Now compatible with PHP 7.2

• Improved TS generation in backend context

  • it's now possible to use TS templates on sub pages
  • No more usage of module.tx_beautyofcode < plugin.tx_beautyofcode

• Update Prism to 1.11.0
• Bugfix for TYPO3 >= 8.5

3.1 to 3.2 

What you need to know:

• Now compatible with TYPO3 8.7
• Show default header in BE preview
• Use FormEngine NodeFactory API instead if XCLASS
• Update Prism to 1.6.0

3.0 to 3.1 

What you need to know:

• Now compatible with TYPO3 8.4 (please make sure to use root template for adding static TS when using 8.x)
• Bugfix for t3editor EM configuration (thanks to Thomas Kieslich!)
• Bugfix for new content element wizard configuration
• Code is now PSR-2 standard compliant

2.x to 3.0 

In order to make this extension work best possible in TYPO3 7.x and to make maintaining more easier (especially the t3editor implementation) this version introduces usage of the default tt_content bodytext field.

What you need to know:

• Removed TYPO3 6.x support
• There is an update wizard available through Extension Manager to migrate your existing records
• Almost no visible changes in backend user interface
• Make sure to adopt your TypoScript (assigning your settings to module. for backend context)
• Updated PrimJs vendor to version 1.3.0
• Add some new PrimsJs languages (Actionscript, Applescript, Diff, Erlang, Git, Sass, Scala, Twig, Less, MarkDown, Powershell, Yaml)
• Use core icon for plugin and wizard
• Added a composer.json and a bower.json file
• Improved code style

1.0 to 2.0 

Rewritten for Extbase/Fluid.

What you need to know:

• Execute update script within extension manager to update adjusted plugin names in database

• You'll need to change your TypoScript code

  • SyntaxHighlighter v2 + beautyofcode (jQuery) abstraction layer was removed
  • include the correct static template

  • removed TypoScript constants / setup paths:

    • jquery.scriptUrl (adapt template if you need to adjust)
    • jQueryNoConflict (inline JS is wrapped in module pattern style code)
    • config.strings (<f:translate /> vhs in templates)
    • addjQuery (please make sure to include jQuery by yourself if you want to use the includeAsDomReady / onReadyCallback configuration settings
    • selector

Please see the changelog for all changes in detail.

0.6 to 0.7 

Big update: finally its possible to use this extension without jQuery. Massive remanufacturing and code changes. Please consider this release as a beta version as I did test every feature the best I can but not sure if everything will work out on every TYPO3 installation.

What you need to know:

• You'll need to change your TypoScript code

  • paths for base, scripts and styles
  • addjQuery and selector have been moved to the jquery. Array
  • some variables have been slightly renamed

• Extension Manager settings has been removed, use TS configuration instead
• SyntaxHighlighter v3 changed some features (learn more: “Which version to choose”)

Please see the changelog for all changes in detail.

0.5 to 0.6 

This version introduces HTML templating. That's why some TS options are not longer available or renamed:

• plugin.tx_beautyofcode_pi1.label.wrap is removed as it's now configured via template
• plugin.tx_beautyofcode_pi1.label.show is renamed to showLabel
• plugin.tx_beautyofcode_pi1.wrap is removed as it's now configured via template

Generated markup 

<pre class="php">
   CODE GOES HERE
</pre>

<pre class="language-php">
   <code>
      CODE GOES HERE
   </code>
</pre>

FAQ 

cd packages/beautyofcode
composer install
cd .Build
bash ./run_tests.sh