Vscode: [grammars] Pluggable syntax highlight engine for templating languages between backticks ``

[alber70g]

I've shamelessly copied from the atom-typescript issue.
To illustrate this, please look at a followup which contains a screenshot

The issue

Since backticks `` are ment for template formats, it would be nice to have a way to define syntax highlighting between them.

For example Angular2 implements templates in TypeScript as following:

@Component({
  selector: 'tabs',
  template: `
    <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
    </ul>
    <ng-content></ng-content>
  `
})

Atom

[mohsen1]

See #2000 and all linked issues.

[ghost]

@Component({
  selector: 'tabs',
  templateUrl: 'dev/template.html'
})

And write the your html code in dev/template.html

[alber70g]

@larskris Thanks for your comment. I've already taken this into consideration.

But I have been using it in that way, indeed getting the html code support, but I feel that when a template isn't bigger than 20-30 lines, it's less time consuming to switch between the files and leave it in one file. This also adds to better reasoning about it.

[aeschli]

With TextMate grammars you can also inject syntax coloring rules. (http://blog.macromates.com/2012/injection-grammars-project-variables/).
We can already process injection grammars. What's missing is a way to contribute an injection grammar for a set of languages from an extension.

Would you be interested in expressing your coloring rules as Text mate inject rules?

[alber70g]

@aeschli sorry to be so slow in the follow up, but anything that could give me syntax highlighting (as a first step) and/or autocompletion between backticks '`' would be awesome.

[Deviad]

Hello, I am interested in this feature as well, as this along with the fact of having no way to easily use Gulp, is one of the main reason for me to use some proprietary solutions right now.
Plus some unidentified bug with files having several lines of codes that make css linter get timeout error.
How can I help you?

[Deviad]

Any news on this matter?

[aeschli]

You can now contribute injection grammars using the regular 'grammar' contribution point:

"grammars": [
            {
                "scopeName": "source.todo",
                "path": "./syntaxes/todo.json",
                "injectTo": [  "source.js", "source.ts" ]
            },

Check out https://github.com/Microsoft/vscode-textmate/blob/master/test-cases/first-mate/fixtures/todo.json for an example of an injection grammar.

We don't have much experience with this type of grammars, but we hope they can provide a solution for language additions such as highlighting Angular templates.

Feedback is highly welcome.

[tolgabalci]

I just got a chance to review the May update with the above stated "TextMate grammar injections".

Out of the box at least, in my ts files HTML syntax highlight/completion is not available inside of backticks. I'm wanting to use this for Angular2 component templates.

Can someone help me understand the configuration necessary to use "TextMate grammar injections" make this happen?

[aeschli]

@tolgabalci Can you share your injection grammar?

[tolgabalci]

@aeschli I'm sorry, but I'm not familiar with TextMate Grammer Injections. It's just that it was stated to help resolve syntax highlight/completion of HTML inside of backticks, so I'm trying to figure out how. Or should this issue not be closed? I don't mind taking on some work, if you can lead me in the right direction.

[wmertens]

I think #5961 is a full duplicate of this and can perhaps be closed as such.

@aeschli would it be possible to extend the injection grammar syntax so template strings can be marked as a grammar as a whole, automatically matching the backticks and excluding the interpolations? Matching a full ES6 template with TextMate grammar is not trivial.

Ideally, we'd be able to do something like (handwaving)

{
    "fileTypes": ["js", "jsx"],
    "injectionSelector": "js.templateString",
    "name": "styled-components",
    "patterns": [
        {
            "templateFunction": "^styled\.[[A-Za-z_]\w*$",
            "name": "CSS",
            "interpolation": "INTERP",
        },
    ],
    "scopeName": "CSS.styled-components"
}

which would treat embedded CSS from http://styled-components.com as such, adding syntax highlighting and code completion, and replacing interpolations with the literal INTERP while highlighting.

[wmertens]

@aeschli or anyone, is there somewhere I can ask about extending the injection grammar like I propose above?

[aeschli]

@wmertens We were basically just providing the injection grammar capabilities that TextMate has. We want to stay compatible to that, having our own variant of TextMate is not what we aim for.

None of us has serious experience with authoring an injection grammar. So, I'm guessing here. From what I understand your problem is that you don't want to repeat the rules for JavaScript expressions that can appear in the string literal. Any chance you can bring them in with an include "include": "source.js#expression" ?

[wmertens]

@aeschli hmmm, the problem is that the interpolation can happen at any
time, and is not part of the injected grammar. So complex grammars lose
their parsing state at each interpolation, or maybe they need to be
extended that at every position, an interpolation can happen. Insanity.

If the template string can be stitched together before giving it to the
injected grammar, that makes grammar reuse easy.

[davibe]

Something similar happens with styled-jsx, i.e.

<style jsx global>{`
.typography-cv {
  margin-left: 4.5cm;
  padding-left: .2cm;
...

And also with markdown-in-js, i.e.

import markdown from 'markdown-in-js'

const Content = () => markdown`

Hello
==============

## IT Software Engineer
...