PHPackages                             karavas/highlight-js - 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 &amp; Helpers](/categories/utility)
4. /
5. karavas/highlight-js

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

karavas/highlight-js
====================

2.0.0(6y ago)11GPL-2.0-or-laterCSS

Since May 6Pushed 6y ago1 watchersCompare

[ Source](https://github.com/AKaravas/highlight_js)[ Packagist](https://packagist.org/packages/karavas/highlight-js)[ RSS](/packages/karavas-highlight-js/feed)WikiDiscussions master Synced today

READMEChangelog (2)Dependencies (1)Versions (2)Used By (0)

Highlight.js, TYPO3 Extension
=============================

[](#highlightjs-typo3-extension)

Create a Highlight.js element in TYPO3

For administrators
------------------

[](#for-administrators)

The extension needs to be installed as any other extension of TYPO3 CMS:

1. Switch on the **Extensions** module
2. On the upper left corner select the **"Get Extensions"** from the select menu
3. On the search bar, type: **highlight\_js**
4. Click on the cloud icon and download the extension

Preparation: Include static TypoScript
--------------------------------------

[](#preparation-include-static-typoscript)

The extension ships some TypoScript code which needs to be included.

1. Switch on the **Template module**
2. Go to your root page
3. Switch to the **Edit the whole template record**
4. Switch to the **Includes** tab
5. Choose the **Highlight.js TypoScript** static template
6. Save and close your settings

Include PageTS
--------------

[](#include-pagets)

The extension ships TSConfig too:

1. Switch to your root page
2. Edit the page
3. Switch to Resources
4. Include **Highlight.js - PageTS**
5. Save

Apply your own templates
------------------------

[](#apply-your-own-templates)

Define on your TypoScript file the path that your templates are located.

```
tt_content {
  	highlight_js {
		templateRootPaths.500 = EXT:yourExtention/Resources/Private/Templates/
		partialRootPaths.500 = EXT:yourExtention/Resources/Private/Partials/
		templateName = Highlight.html
	}
}

```

Apply Styles
------------

[](#apply-styles)

On the constants editor, you can find a list with the current implemented styles. Select one and see it rendered on the frontend.

For editors
-----------

[](#for-editors)

1. Switch on the **Page** module
2. Choose the page on the Pagetree that you would like the content element to be placed
3. Click on the content button to create a new content element
4. Switch to **Highlight.js**
5. Choose your content element

Additional info
---------------

[](#additional-info)

Since Highlight.js supports a load of languages, i can not include them all at once so if you want more styles or languages to be included, create an issue in order to get them asap included.

In case you have the TypoScript and FLUID language definitions, please submit them here so i will be able to add them on the extension:

[highlightjs/highlight.js#2030](https://github.com/highlightjs/highlight.js/issues/2030)

###  Health Score

25

—

LowBetter than 35% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity3

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~183 days

Total

2

Last Release

2476d ago

Major Versions

1.0.0 → 2.0.02019-11-05

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/16290719?v=4)[AKaravas](/maintainers/AKaravas)[@AKaravas](https://github.com/AKaravas)

---

Top Contributors

[![AKaravas](https://avatars.githubusercontent.com/u/16290719?v=4)](https://github.com/AKaravas "AKaravas (25 commits)")

---

Tags

codehighlight.jsextensiontypo3

### Embed Badge

![Health badge](/badges/karavas-highlight-js/health.svg)

```
[![Health](https://phpackages.com/badges/karavas-highlight-js/health.svg)](https://phpackages.com/packages/karavas-highlight-js)
```

###  Alternatives

[friendsoftypo3/content-blocks

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

103574.3k69](/packages/friendsoftypo3-content-blocks)[typo3/cms-styleguide

TYPO3 extension to showcase TYPO3 Backend capabilities

105768.9k39](/packages/typo3-cms-styleguide)[wazum/sluggi

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

40543.5k](/packages/wazum-sluggi)[clickstorm/cs-seo

\[clickstorm\] SEO - Extension for TYPO3. Enables important onpage features for search engine optimization (SEO). Expands the page settings and any desired records for example with a preview for Google search results (SERP) Structured Data (JSON-LD) and a Focus Keyword. Restrictive hreflang and canonical tags. Modules for metadata of records and alternative texts of images. Further features are shown in the extension manual.

37542.0k1](/packages/clickstorm-cs-seo)[friendsoftypo3/visual-editor

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

6010.0k3](/packages/friendsoftypo3-visual-editor)[quellenform/t3x-iconpack

Provides an iconpack-registry for custom iconpacks.

1556.7k27](/packages/quellenform-t3x-iconpack)

PHPackages © 2026

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