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

Authored by nibags on Feb 12 2019, 11:38 AM.



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


  • text/typescript


  • 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/ script:

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


BUG: 369562

Diff Detail

R216 Syntax Highlighting
Automatic diff as part of commit; lint not applicable.
Automatic diff as part of commit; unit tests not applicable.
nibags created this revision.Feb 12 2019, 11:38 AM
Restricted Application added projects: Kate, Frameworks. · View Herald TranscriptFeb 12 2019, 11:38 AM
Restricted Application added subscribers: kde-frameworks-devel, kwrite-devel. · View Herald Transcript
nibags requested review of this revision.Feb 12 2019, 11:38 AM
nibags edited the summary of this revision. (Show Details)Feb 12 2019, 11:48 AM
cullmann accepted this revision.Feb 12 2019, 7:29 PM

I think this is a useful addition, the license is ok, there is a test case and no old tests regress.
I am not sure how good the coverage for the generated highlightings is, but at least no obvious issues.
Thanks for the contribution.
Btw., if you have more insight about the quality of the tests for the generated hl files and can improve that, a extra patch with more autotests is appreciated.
But maybe the coverage is already good ;=)
+1 for no hard-coded colors ;=)

This revision is now accepted and ready to land.Feb 12 2019, 7:29 PM
This revision was automatically updated to reflect the committed changes.

I can add more examples in "autotests/input/highlight.php", for all the cases of languages ​​included

I can add more examples in "autotests/input/highlight.php", for all the cases of languages ​​included

That would be nice.

The MustacheJS highlight is modified in this diff: D19328