---
title: "Configuration"
manual: "Code Highlight"
version: "5.0"
permalink: "https://docs.typo3.org/permalink/brotkrueml/codehighlight:configuration@5.0"
source: "Configuration/Index.rst"
rendered: "2026-10-12T15:21:37+00:00"
---

# Configuration {#configuration}

Target group: **Developers, Integrators**

-   [Site configuration](https://docs.typo3.org/permalink/brotkrueml/codehighlight:site-configuration-1@5.0)
-   [Site sets (TYPO3 v13+)](https://docs.typo3.org/permalink/brotkrueml/codehighlight:site-sets-typo3-v13@5.0)
-   [Constant editor (without site sets)](https://docs.typo3.org/permalink/brotkrueml/codehighlight:constant-editor-without-site-sets@5.0)
-   [Assets embedding](https://docs.typo3.org/permalink/brotkrueml/codehighlight:assets-embedding-1@5.0)

## Site configuration {#site-configuration}

Some site-wide configurations can be made in the
[site configuration](https://docs.typo3.org/m/typo3/reference-coreapi/14.3/en-us/ApiOverview/SiteHandling/Index.html#sitehandling). Select a site under
**Site Management** \> **Sites** and switch to the tab
**Code Highlight**.

![Site configuration](../Images/Configuration/site-configuration.png)

### CSS file for theme {#configuration-theme}

In the value picker you have the choice between several themes for using on a
website. As the extension uses [PrismJS](https://prismjs.com/) 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](https://github.com/PrismJS/prism-themes). 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 {#configuration-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](https://docs.typo3.org/permalink/brotkrueml/codehighlight:editor-url-hash@5.0).

### Command line: default host {#configuration-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 {#configuration-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" {#configuration-toolbar-copy}

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.

## Site sets (TYPO3 v13+) {#site-sets}

This extension provides support for [site sets](https://docs.typo3.org/m/typo3/reference-coreapi/14.3/en-us/ApiOverview/SiteHandling/SiteSets/Index.html#site-sets).

Add `brotkrueml/codehighlight` as dependency to the configuration of
your site package:

**EXT:your_sitepackage/Configuration/Sets/\<your-set>/config.yaml**

```yaml
name: your-vendor/your-sitepackage
label: Sitepackage

dependencies:
  # ... some other dependencies

  - brotkrueml/codehighlight
```

### Settings {#settings}

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 {#path-to-template-root}

Define the additional template root path, for example,
`EXT:your_sitepackage/Resources/Private/Templates/Codehighlight/`.

**EXT:your_sitepackage/Configuration/Sets/\<your-set>/settings.yaml**

```yaml
# ... some other settings

tt_content:
   tx_codehighlight_codesnippet:
      templateRootPath: 'EXT:your_sitepackage/Resources/Private/Extensions/Codehighlight/Templates/'
```

#### Path to template partials {#path-to-template-partials}

Define the additional partial root path, for example,
`EXT:your_sitepackage/Resources/Private/Partials/Codehighlight/`.

**EXT:your_sitepackage/Configuration/Sets/\<your-set>/settings.yaml**

```yaml
# ... some other settings

tt_content:
   tx_codehighlight_codesnippet:
      partialRootPath: 'EXT:your_sitepackage/Resources/Private/Extensions/Codehighlight/Partials/'
```

#### Path to template layouts {#path-to-template-layouts}

Define the additional layout root path, for example,
`EXT:your_sitepackage/Resources/Private/Layouts/Codehighlight/`.

**EXT:your_sitepackage/Configuration/Sets/\<your-set>/settings.yaml**

```yaml
# ... some other settings

tt_content:
   tx_codehighlight_codesnippet:
      layoutRootPath: 'EXT:your_sitepackage/Resources/Private/Extensions/Codehighlight/Layouts/'
```

#### CSS file {#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.

**EXT:your_sitepackage/Configuration/Sets/\<your-set>/settings.yaml**

```yaml
# ... some other settings

tt_content:
   tx_codehighlight_codesnippet:
      cssFile: 'EXT:your_sitepackage/Resources/Public/Css/codehighlight.css'
```

## Constant editor (without site sets) {#constant-editor}

Some constants can be defined in the
[constant editor](https://docs.typo3.org/m/typo3/reference-typoscript/14.3/en-us/UsingSetting/Entering.html#typoscript-syntax-constant-editor). It is
recommended to use [site sets](https://docs.typo3.org/permalink/brotkrueml/codehighlight:site-sets@5.0) instead.

Select the category **Codehighlight** and make your adjustments.

![Constant Editor](../Images/Configuration/constant-editor.png)

### Files {#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) {#path-to-template-root-fe}

Enter the additional template root path, for example,
`EXT:your_sitepackage/Resources/Private/Templates/Codehighlight/`.

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

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

#### Path to template partials (FE) {#path-to-template-partials-fe}

Enter the additional partial root path, for example,
`EXT:your_sitepackage/Resources/Private/Partials/Codehighlight/`.

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

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

#### Path to template layouts (FE) {#path-to-template-layouts-fe}

Enter the additional layout root path, for example,
`EXT:your_sitepackage/Resources/Private/Layouts/Codehighlight/`.

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

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

#### CSS file {#css-file-1}

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:

```typoscript
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 {#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](https://docs.typo3.org/m/typo3/reference-typoscript/14.3/en-us/TopLevelObjects/Config.html#setup-config-concatenatejs) and
[config.concatenateCss](https://docs.typo3.org/m/typo3/reference-typoscript/14.3/en-us/TopLevelObjects/Config.html#setup-config-concatenatecss) (only
available in TYPO3 v13). One exception from concatenation is the PrismJS
autoloader JavaScript which is used to load the necessary language files.