Highlight HTML, CSS, Markdown, GraphQL in JS tagged template literals

Motivation

Prism doesn’t highlight supported languages when they are in a tagged template literal with common tags.

Description

Support for common tagged template literals such as:

// HTML
html`...`

// CSS
css`...`

// React Components CSS
styled.foo``
Component.extend``
styled.foo.attr({})``
Component.extend.attr({)``
styled(Component).attr({})``
css.global``
css.resolve``

// Markdown
md`...`
markdown`...`

// GraphQL
gql`...`
graphql`...`
graphql.experimental`...`

// SQL
sql`SELECT * FROM users WHERE id = ${id}`

To allow this highlighting behavior without adding a tag call, one option is to also support comments in the place of tags:

/* HTML */`...`
/* CSS */`...`

There are also other non-template literal syntaxes which are potentially desired:

// Angular Components HTML + CSS
@Component({
  template: `<div>...</div>`,
  styles: [`h1 { color: blue; }`]
})

// styled-jsx CSS
<style jsx>{`div{color:red}`}</style>

---

Prettier has some AST tests for these things which could probably be repurposed here (or at least, could inspire a solution):

HTML tagged template literals:

• isHtml

CSS tagged template literals:

• isCss (overall test for all types of CSS tagged template literals: normal CSS, Angular, React Components)
• isStyledJSX
• isStyledComponent
• isCssProp
• isAngularComponentStyles

Markdown tagged template literals:

• Markdown

GraphQL tagged template literals:

• isGraphQL

---

Edit: It seems like #1714 has part of (all of) the styled-components implementations, and maybe this could be repurposed to achieve all the other languages.

[RunDevelopment]

I would vote to add the eventual change with all languages as part of the main default JS language, since tagged template strings with different languages are common in places other than React / JSX / other frameworks. source

While it’s true that these tagged literals are quite common for frameworks, they are not part of the JS language spec and therefore should be an optional opt-in feature IMO. A more technical reason as to why handling tagged template strings with different languages in the main JS language is not optimal are dependencies. JS will have to require all included languages meaning that to highlight a small snippet of JS code (which might not even contain templates) you have to (down-)load all these languages. While I could tolerate CSS and Markup being required, I don’t see why JS has to require GraphQL, Markdown, or other languages we’ll include later.

My preferred solution here is a new language which handles all languages embedded in JS templates. I’m thinking of something along the lines of JS Templates. This makes the whole thing opt-in and keeps main JS lang light.

[RunDevelopment]

Great suggestion!

There is one thing I want to add to the list of non-tagged literals:

div.innerHTML = `
    <em>Foo</em>
`;

(Even GitHub highlights this)

---

To allow this highlighting behavior without adding a tag call, one option is to also support comments in the place of tags:

/* HTML */`...`
/* CSS */`...`

I really don’t like the idea of Prism specific syntax for the sole purpose of highlighting. I get why this is desirable but no other editor (at least not that I’m aware of) supports this and adjusting your code specifically for Prism is not something which should have to do.