PHP code snippet 

Example output using the Coy theme for a PHP code snippet with line numbers and line highlighting:

Shell command 

Example output using the Coy theme for a shell command with prompt:

CSS inline colours 

Example output using the Coy theme for a CSS snippet with activated inline colours (the coloured square before the colour definition):

Treeview 

Example for a treeview to highlight file system tree structures:

General 

In the General tab insert the code snippet into the according field:

Options 

Here you'll find some settings to tune the visual representation of the code snippet. First of all you can select the programming language - dependent on the language the snippet is formatted:

Programming language

Make use of the filter on the right side of the select box to find the needed programming language. You can only select one language at a time. Leave it empty if the language you want is not available or you don't want syntax highlighting.

Filename

Give a filename if it makes sense for the code snippet. It will be shown near the snippet.

Line numbers 

Sometimes it is desirable to add line numbers, start them at a different number than 1 or highlight one or more lines to point out something important. You can adjust these settings under the Line numbers tab of the options:

Show line numbers

Activate this option to display line numbers at the beginning of the each code line.

Start with line number

Specify a line number with which the numbering is to begin. The entered number will also be used for "Highlight lines" as offset value.

Highlight lines

You can specify the lines to be highlighted in the following format:

• A single number refers to the line with that number
• Ranges are denoted by two numbers, separated with a hyphen (-)
• Multiple line numbers or ranges are separated by commas
• Whitespace is allowed anywhere and will be stripped off

Example: 1-2, 5, 9-20 (Lines 1 through 2, line 5, lines 9 through 20)

When using an offset in the field Start with line number the lines must be adjusted accordingly.

Tip

When using the Highlight lines feature or the configuration option Usage of a URL hash is activated you can link to a specific line number by using the following as a URL hash: #codesnippet{uid}.{lines}. {uid} is the id of the content element and {lines} is one or more lines or line ranges that follow the format outlined above.

Examples:

• #codesnippet14.3 for highlighting line 3 of content element with id 14
• #codesnippet8.5-6 for highlighting lines 5-6 of content element with id 8
• #codesnippet23.5-6,12-14 for highlighting lines 5-6 and 12-14 of content element with id 23

Command line 

To visualise the commands on a console you can activate the Display command line switch. A prompt will be shown before a code line.

Display command line

Display a command line with a prompt and, optionally, the output/response from the commands.

Please note: If you activate this option, don't select a programming language or the prompts are not visible!

User

Specify the user for a server command line (like Linux). The resulting prompt displays a # for the root user and $ for all other users.

Default value: Site configuration setting Command Line Default User or user

Host

Specify the host for a server command line (like Linux).

Default value: Site configuration setting Command Line Default Host or localhost

Prompt

For any other command line, such as a Windows prompt, specify the entire prompt, for example, PS C:\Users\Chris>. If this field is set, the values in the fields User and Host are ignored.

Output lines

You can specify the lines to be presented as output (no prompt and no highlighting) in the following format:

• A single number refers to the line with that number
• Ranges are denoted by two numbers, separated with a hyphen (-)
• Multiple line numbers or ranges are separated by commas
• Whitespace is allowed anywhere and will be stripped off

Example: 1-2, 5, 9-20 (Lines 1 through 2, line 5, lines 9 through 20)

Filter output

Alternative for "Output lines": Specify a prefix for lines with output, for example, (out) will treat lines beginning with (out) as output and remove the prefix.

You can see some examples for the rendering of the command line on the plugin page of the Prism library.

Styles 

To show a preview of a colour in CSS styles you can activate the Inline colour switch.

This adds a small square before the colour definitions:

Treeview 

To highlight file system tree structures the Treeview switch can be activated.

This adds icons for folders and files:

The treeview may be generated on Unix systems with tree -F.

Examples for a tree structure in the Code snippet field:

root_folder/
|-- a first folder/
|   |-- holidays.mov
|   |-- javascript-file.js
|   `-- some_picture.jpg
|-- documents/
|   |-- spreadsheet.xls
|   |-- manual.pdf
|   |-- document.docx
|   `-- presentation.ppt
|       `-- test
|-- empty_folder/
`-- README.md

Copied!

or:

├── a first folder/
|   ├── holidays.mov
|   ├── javascript-file.js
|   └── some_picture.jpg
├── documents/
|   ├── spreadsheet.xls
|   ├── manual.pdf
|   ├── document.docx
|   └── presentation.ppt
└── etc.

Copied!

Appearance 

The Appearance tab gives the possibility to select a layout or show the content element in section menus, like in other content elements.

Access 

On the Access tab you'll find the default fields, like Visibility of content element or the publish dates.

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.

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.

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.

# ... some other settings

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

# ... some other settings

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

# ... some other settings

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

# ... some other settings

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

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.

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

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

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

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

Added 

• Compatibility with TYPO3 v14

Removed 

• Compatibility with TYPO3 v12 (#38)

Fixed 

• Line number settings are not used by PrismJS (#39, thanks to Sebastian Klein)

Updated 

• PrismJS to version 1.30.0

Fixed 

• Invalid Fluid namespace definition with Fluid 4

Added 

• Support for site sets in TYPO3 v13

Added 

• Compatibility with TYPO3 v13

Removed 

• Compatibility with TYPO3 v11 (#36)

Fixed 

• Error when opening a site configuration in TYPO3 v12.3

Added 

• Plugin "Treeview" to highlight file system tree structures

Added 

• Compatibility with TYPO3 v12 (#35)

Changed 

• Fluid template of code snippet content element

Removed 

• Compatibility with TYPO3 v9 and TYPO3 v10 (#25, #26)

Fixed 

• TCA configuration of content element is missing in TYPO3 v11.5.18 (#37)

Updated 

• PrismJS to version 1.29.0

Added 

• Compatibility with typo3/cms-composer-installers v4 (#33)

Changed 

• The PrismJS autoloader JavaScript can't be concatenated anymore with other JavaScript files (#33)

Updated 

• PrismJS to version 1.28.0

Updated 

• PrismJS to version 1.27.0

Updated 

• PrismJS to version 1.26.0

Added 

• Button "Copy" to copy a code snippet to the clipboard (#27)

Fixed 

• Move content element to group "special" in type select box (TYPO3 v10+)

Security 

• Update PrismJS to version 1.25.0

Updated 

• PrismJS to version 1.24.1

Updated 

• PrismJS to version 1.24.0

Security 

• Update PrismJS to version 1.23.0

Added 

• Plugin "Inline colour" to show colour preview in CSS snippets
• Compatibility with TYPO3 v11

Updated 

• PrismJS to version 1.22.0

Fixed 

• Show content element in wizard in TYPO3 v10

Updated 

• PrismJS to version 1.21.0

Updated 

• PrismJS to version 1.19.0

Added 

• Add t3 pseudo language (#13)

Fixed 

• Fixed an error when editing translated content (#14)

Added 

• Possibility to display filename for snippet (#10)

Changed 

• Move asset handling and HTML code generation from template to view helper (#8)
• Move command line TypoScript settings to site configuration (#9)
• Separate shell and bash, bnf and rbnf in the list of available languages

Fixed 

• Use reference to lib.contentElement instead of assigning FLUIDTEMPLATE (#5)

Added 

• Setting for default user and host in command line (#2)
• Activate heading and appearance tab in content element (#3)
• Using URL hash to highlight lines and jump to them (#4)

Added 

• German translations

Added 

• Content element "Code Snippet"
• Syntax highlighting with PrismJS

Update 

To update the library to the recent version just call on the console:

cd Build
npm update prismjs
npm run build

The copied artifacts can now be committed (along with the package.json file to the repository. Don't forget to add new files to the commit and add these to the translation file Resources/Private/Language/ProgrammingLanguages.xlf.