TYPO3 Fluid Asset Script JS Highlighting

Adds JavaScript syntax highlighting inside TYPO3 Fluid <f:asset.script> blocks.

What It Does

This extension injects the standard JavaScript grammar into the content of TYPO3 Fluid <f:asset.script> tags. The surrounding Fluid and HTML tag syntax stays highlighted as markup, while the block body is treated as JavaScript.

Example

<f:asset.script identifier="frontend-behavior">
	document.addEventListener('DOMContentLoaded', () => {
		const toggle = document.querySelector('[data-toggle]');

		if (toggle) {
			toggle.addEventListener('click', () => {
				console.log('ready');
			});
		}
	});
</f:asset.script>

Inside the block body, VS Code uses its normal JavaScript syntax highlighting.

Scope

• Targets block-style <f:asset.script>...</f:asset.script> usage in Fluid templates.
• Injects JavaScript only into the block content.
• Works by extending the HTML/TextMate grammar used for Fluid-like HTML templates.

Limitations

• This extension adds syntax highlighting only. It does not add formatting, IntelliSense, linting, or diagnostics.
• It currently targets block-style <f:asset.script> tags, not self-closing variants.
• Highlighting quality still depends on the base grammar used by the active Fluid or HTML syntax.

Source And Support

• Source code: https://github.com/oliverschloebe/typo3-fluid-asset-script-syntax-highlighting
• Issue tracker: https://github.com/oliverschloebe/typo3-fluid-asset-script-syntax-highlighting/issues

npm Package

This repository is also published to npmjs.com as a source/assets distribution.

Note: Installing via npm install makes the grammar and assets available for tooling integration. It does not install the extension inside VS Code. To activate syntax highlighting in VS Code, install the extension from the VS Code Marketplace.