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