PHPackages                             danielgoerz/fs-code-snippet - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. danielgoerz/fs-code-snippet

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

danielgoerz/fs-code-snippet
===========================

A content element to render code snippets of various programming languages.

3.2.0(4y ago)928.1k↑169.2%9[4 issues](https://github.com/ervaude/fs_code_snippet/issues)[5 PRs](https://github.com/ervaude/fs_code_snippet/pulls)GPL-2.0-or-laterCSSCI passing

Since Dec 23Pushed 4mo ago5 watchersCompare

[ Source](https://github.com/ervaude/fs_code_snippet)[ Packagist](https://packagist.org/packages/danielgoerz/fs-code-snippet)[ Docs](https://usetypo3.com)[ RSS](/packages/danielgoerz-fs-code-snippet/feed)WikiDiscussions master Synced yesterday

READMEChangelog (10)Dependencies (1)Versions (25)Used By (0)

EXT: fs\_code\_snippet
======================

[](#ext-fs_code_snippet)

fs\_code\_snippet is an extension for TYPO3. It implements a content element that enables you to render code snippets of various programming languages. It depends on fluid\_styled\_content rendering.

It makes use of the T3Editor in the backend and the code snippet library prism.js in the frontend.

Requirements
------------

[](#requirements)

- TYPO3 9 LTS or 10 LTS
- fluid\_styled\_content
- t3editor

Installation and Setup
----------------------

[](#installation-and-setup)

Installing and configuring this extension is pretty straight forward. There are only a few things that can be configured.

### Installation

[](#installation)

To install the extension, perform the following steps:

- Go to the Extension Manager
- Install the extension
- Load the static template

### Configuration

[](#configuration)

Most configuration is done via TypoScript constants which are editable in the constant editor in the TYPO3 backend.

- The TemplateRootPath can be overwritten with constant `{$plugin.tx_fscodesnippet.view.templateRootPath}`. However, the fallback mechanism of `FLUIDTEMPLATE` could be used as well to override the default template.
- In the constant editor the *theme* of the code snippet can be adjusted according to the themes shipped by prism.js.
- Line numbers are enabled.

Extendability
-------------

[](#extendability)

Per default this extensions only provides a curated subset of programming languages from the huge list supported by prism.js. The main reason for this is to prevent the included JavaScript from being bloated with lots of code you never need. If you however do need support for a programming language not included in the default set, you can add any language yourself. You achieve this by overwriting the TCA for the programming\_language field to include more programming\_languages and extend the JavaScript with the corresponding syntax highlighter.

To add a new language to the TCA you can use the constant from the included CodeSnippetLanguage Enumeration to get the needed string right. In any extension of yours, create the file `Configuration/TCA/Overrides/tt_content.php` and add the following code to it:

.. code-block:: php

```
$GLOBALS['TCA']['tt_content']['columns']['programming_language']['config']['items'][] = ['Python' => \DanielGoerz\FsCodeSnippet\Enumeration\CodeSnippetLanguage::PYTHON];

```

You can add every language identifier that prism supports. Anyway the T3Editor won't know that syntax and will run in "mixed" mode.

To enable the syntax highlighting in the frontend you need to include the corresponding JavaScript component from prism.js. In case of python this would be components/prism-python.js. You can either download the component from prismjs.com or github or you can use the gulp build shipped with this extension to generate a new all-in-one file.

To do so, go to the extension folder and edit the `gulpfile` to also include the components you need in the `buildJs` task (e.g. `prismBasePath + 'components/prism-python.js'`). Then run

.. code-block:: bash

```
yarn install
gulp build

```

Now you should have a `FsCodeSnippet.js` that supports Python.

*Make sure to move the generated `FsCodeSnippet.js` to your own extension and include it from there. Otherwise it will be overwritten if you update fs\_code\_snippet at any time in the future.*

---

*Made by Daniel Goerz (@[b13](https://b13.com)) with ♥*

###  Health Score

46

—

FairBetter than 92% of packages

Maintenance44

Moderate activity, may be stable

Popularity35

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity73

Established project with proven stability

 Bus Factor1

Top contributor holds 91.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~113 days

Recently: every ~155 days

Total

20

Last Release

1684d ago

Major Versions

1.9.0 → 2.0.02019-10-03

2.1.0 → 3.0.02020-04-04

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/7824856?v=4)[Daniel Goerz](/maintainers/ervaude)[@ervaude](https://github.com/ervaude)

---

Top Contributors

[![ervaude](https://avatars.githubusercontent.com/u/7824856?v=4)](https://github.com/ervaude "ervaude (57 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![ruudsilvrants](https://avatars.githubusercontent.com/u/9974197?v=4)](https://github.com/ruudsilvrants "ruudsilvrants (1 commits)")[![ruudsilvrants-beech](https://avatars.githubusercontent.com/u/129871953?v=4)](https://github.com/ruudsilvrants-beech "ruudsilvrants-beech (1 commits)")[![t3easy](https://avatars.githubusercontent.com/u/3628035?v=4)](https://github.com/t3easy "t3easy (1 commits)")

---

Tags

prismjstypo3typo3-cms-extensionextensiontypo3code snippet

### Embed Badge

![Health badge](/badges/danielgoerz-fs-code-snippet/health.svg)

```
[![Health](https://phpackages.com/badges/danielgoerz-fs-code-snippet/health.svg)](https://phpackages.com/packages/danielgoerz-fs-code-snippet)
```

###  Alternatives

[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

103519.9k53](/packages/friendsoftypo3-content-blocks)[wazum/sluggi

TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects

40529.5k](/packages/wazum-sluggi)[friendsoftypo3/tt-address

Displays a list of addresses from an address table on the page.

461.8M44](/packages/friendsoftypo3-tt-address)[friendsoftypo3/visual-editor

TYPO3 CMS Visual Editor - Brings a modern WYSIWYG editing experience to TYPO3 CMS.

576.1k2](/packages/friendsoftypo3-visual-editor)[quellenform/t3x-iconpack

Provides an iconpack-registry for custom iconpacks.

1552.6k27](/packages/quellenform-t3x-iconpack)[t3brightside/pagelist

TYPO3 CMS extension to create news, events, vacancies and products or just page lists. Demo: microtemplate.t3brightside.com

1121.5k1](/packages/t3brightside-pagelist)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)