Configuration

Target group: Developers, Integrators

Site Configuration

Some site-wide configurations can be made in the Site Configuration. Select a site under Site Management > Sites and switch to the tab Code Highlight.

Site Configuration

CSS File for Theme

In the value picker you have the choice between several themes for using on a website. As the extension uses PrismJS for the code highlighting you can have a look at their website to see the differences between the themes.

When selecting a theme, the path to the according CSS file is stored in the site configuration. You can also use an own theme to customise the look of the code snippets.

As the theme is assigned to a site, different sites can have different themes.

Tip

If you don't like the shipped themes you find many more in a separate GitHub repository. Just download the desired theme, save it to your site package extension and type the path to the file into the site configuration field.

Usage of a URL Hash

If the option is enabled, the usage of a URL hash (like #codesnippet8.5-6) for highlighting code and as anchor is available. You can find more information in the chapter for editors.

Command Line: Default Host

Defines the default host for the command line, if none is given in the options of the content element. If a value is neither in the configuration nor in the content element given, localhost is used as last fallback.

Command line: Default User

Defines the default user for the command line, if none is given in the options of the content element. If a value is neither in the configuration nor in the content element given, user is used as last fallback.

Toolbar: Display Button "Copy to Clipboard"

If the option is enabled, a Copy button is displayed in the upper right corner when the user moves the mouse pointer over a code snippet.

Constant Editor

Some constants can be defined in the Constant Editor.

Select the category Codehighlight and make your adjustments.

Constant Editor

Files

If you want to change the layout or template of the content element or add a partial you can make a copy of them and adjust the Fluid root paths.

Path to template root (FE)

Enter the additional template root path, e.g. EXT:your_sitepackage/Resources/Private/Templates/Codehighlight/.

Alternatively you can change the setting directly in the TypoScript setup:

tt_content.tx_codehighlight_codesnippet.templateRootPaths {
   10 = EXT:your_sitepackage/Resources/Private/Templates/Codehighlight/
}

Path to template partials (FE)

Enter the additional partial root path, e.g. EXT:your_sitepackage/Resources/Private/Partials/Codehighlight/.

Alternatively you can change the setting directly in the TypoScript setup:

tt_content.tx_codehighlight_codesnippet.partialRootPaths {
   10 = EXT:your_sitepackage/Resources/Private/Partials/Codehighlight/
}

Path to template layouts (FE)

Enter the additional layout root path, e.g. EXT:your_sitepackage/Resources/Private/Layouts/Codehighlight/.

Alternatively you can change the setting directly in the TypoScript setup:

tt_content.tx_codehighlight_codesnippet.layoutRootPaths {
   10 = EXT:your_sitepackage/Resources/Private/Layouts/Codehighlight/
}

CSS File

The extension comes with a default CSS file. If you don't want to include it or want to use an own CSS file you can empty the field or change the path.

Alternatively you can change the setting directly in the TypoScript setup:

tt_content.tx_codehighlight_codesnippet.cssFile {
   settings.cssFile = EXT:your_sitepackage/Resources/Public/Css/codehighlight.css
}

Note

Do not mix up this CSS file with the CSS file for the design. This CSS file is responsible for the representation outside the code section. Currently there are styles for displaying the filename of a snippet.

Assets embedding

The required CSS and JavaScript files from the PrismJS library and the extension's CSS file are embedded with the PageRenderer methods addCssFile() and addJsFooterFile(). This means, that they adhere to the configuration setting $GLOBALS['TYPO3_CONF_VARS']['FE']['versionNumberInFilename'] and the TypoScript settings config.concatenateJs and config.concatenateCss. One exception from concatenation is the PrismJS autoloader JavaScript which is used to load the necessary language files.