Adding New Languages to Zed

LSP

Zed uses the Language Server Protocol to provide language support. This means, in theory, we can support any language that has an LSP server.

Syntax Highlighting

Defining syntax highlighting rules

We use tree-sitter queries to match certain properties to highlight.

Simple Example:

(property_identifier) @property

const font: FontFamily = {
    weight: "normal",
    underline: false,
    italic: false,
}

Match a property identifier and highlight it using the identifier @property. In the above example, weight, underline, and italic would be highlighted.

Complex example:

(_
  return_type: (type_annotation
    [
      (type_identifier) @type.return
      (generic_type
          name: (type_identifier) @type.return)
    ]))

function buildDefaultSyntax(colorScheme: Theme): Partial<Syntax> {
    // ...
}

Match a function return type, and highlight the type using the identifier @type.return. In the above example, Partial would be highlighted.

Example - Typescript

Here is an example portion of our highlights.scm for TypeScript:

; crates/zed/src/languages/typescript/highlights.scm

; Variables

(identifier) @variable

; Properties

(property_identifier) @property

; Function and method calls

(call_expression
  function: (identifier) @function)

(call_expression
  function: (member_expression
    property: (property_identifier) @function.method))

; Function and method definitions

(function
  name: (identifier) @function)
(function_declaration
  name: (identifier) @function)
(method_definition
  name: (property_identifier) @function.method)

; ...

1.7 KiB Raw Blame History