HTML: highlight JSX, TypeScript & MustacheJS code in the <script> tag

Authored by nibags on Feb 12 2019, 7:42 PM.

Description

HTML: highlight JSX, TypeScript & MustacheJS code in the <script> tag

Summary:
In the <script> tag, it will be possible to highlight JSX, TypeScript and Mustache (MustacheJS/HandlebarsJS/RactiveJS) code, according to the "type" attribute.

For example, in <script type="text/typescript">, TypeScript code will be highlighted; in <script type="text/babel"> JavaScript React will be highlighted. These highlights are activated when using the following values in the "type" attribute:

JSX (JavaScript React):

  • text/jsx
  • text/babel

TypeScript:

  • text/typescript

MustacheJS/HandlebarsJS/RactiveJS:

  • x-tmpl-mustache
  • text/x-mustache-template
  • text/x-handlebars-template
  • text/ractive

By default, JavaScript highlighting is used.

The absence of highlighting for Mustache templates in HTML is mentioned in the bug #369562. I have created a new hidden language file that adds Mustache variables to JavaScript. [1][2]

Also, I made some modifications to the data/generators/generate-php.pl script:

  • Avoid duplicate attribute "hidden" in the "language" tag.
  • Avoid injecting <IncludeRules context="FindPHP" /> after <context ... /> (replace /> with ><IncludeRules context="FindPHP" /></context>).

References:

BUG: 369562

Reviewers: Framework: Syntax Highlighting, dhaumann, cullmann

Reviewed By: Framework: Syntax Highlighting, cullmann

Subscribers: kwrite-devel, kde-frameworks-devel

Tags: Kate, Frameworks

Differential Revision: https://phabricator.kde.org/D18951