Highlighting and formatting HTML/SVG code in JavaScript and TypeScript template literals #40083

Angelk90 · 2025-10-13T08:14:24Z

Angelk90
Oct 13, 2025

Currently, treats template literals in JavaScript and TypeScript as simple strings.
It would be helpful if Zed could automatically recognize and color the HTML or SVG code written within them, as VS Code does with the Template Literals extension.

Link: https://github.com/julienetie/vscode-template-literals

vscode-template-literals	Zed

Examples:

const card = `
  <div class="card">
    <h1>Hello ${user}</h1>
      <svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="4"/></svg>
  </div>
`;

const page = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Page</title>
    <style>
      body {
        font-family: sans-serif;
        background-color: #f4f4f4;
        margin: 2rem;
      }
      header {
        background: #0078d7;
        color: white;
        padding: 1rem;
        border-radius: 6px;
      }
      main {
        background: white;
        padding: 1.5rem;
        border-radius: 6px;
        margin-top: 1rem;
      }
      button {
        background: #0078d7;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background: #005a9e;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to Zed</h1>
      <p>Testing HTML syntax highlighting inside template literals</p>
    </header>

    <main>
      <p>Click the button to say hello:</p>
      <button onclick="alert('Hello from Zed!')">Say Hello 👋</button>
    </main>
  </body>
</html>
`;

const arrowFunction = ({value}) => `
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
        <div>${value}</div>
    </div>
`

const assignment = `
    <div class="some-class">
        <style>h1{color: blue;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
        <div>${value}</div>
    </div>
`

const tagFunction = anyTagFn `
    <div class="some-class">
        <style>h1{color: pink;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
        <div>${value}</div>
    </div>
`

const commentFollowedBySpace = /*any-comment*/ `
    <div class="some-class">
        <style>h1{color: brown;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
        <div>${value}</div>
    </div>
`

const disableWithCommentNoSpace = /**/`
    <div class="some-class">
        <style>h1{color: lime;}</style>
        <h1>Hello World!</h1>
        <script>console.log('Hello World')</script>
        <div>${value}</div>
    </div>
`
const disableInlineWithCommentNoSpace = /**/`<This is a regular string> ${abc}`


const regularTLString = `A string without markup will be the color of HTML text <> ${abc}`

console.log(`<h1>Hello World!</h1>`)

console.log( 
    `<h1>Hello World!</h1>`
)

dotNotation[`<p>Test.</p>`]

{
    `<span>VSCode Template Literals</span>`
}

Additionally, it would be great to be able to automatically format the HTML/SVG code contained in the template literal (indentation, tag closing, etc.).

This improves the readability of the code.

JonGretar · 2025-10-13T13:43:01Z

JonGretar
Oct 13, 2025

I'm not sure if the SCM queries allow for regex for defining injected languages yet. Not seen any extension do it that way.

Tagged template strings work at the moment. As they are easily parseable by the tree-sitter. So things like:

const query = sql`SELECT * from database;`;

...get parsed by the SQL extension if you have that installed. You can see what injections are currently set up in https://github.com/zed-industries/zed/blob/main/crates/languages/src/javascript/injections.scm and if/when Zed supports regex matching it would be added there.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Highlighting and formatting HTML/SVG code in JavaScript and TypeScript template literals #40083

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Highlighting and formatting HTML/SVG code in JavaScript and TypeScript template literals #40083

Uh oh!

Angelk90 Oct 13, 2025

Replies: 1 comment

Uh oh!

JonGretar Oct 13, 2025

Angelk90
Oct 13, 2025

JonGretar
Oct 13, 2025