1# Syntax Highlighting in Zed
 2
 3This doc is a work in progress!
 4
 5## Defining syntax highlighting rules
 6
 7We use tree-sitter queries to match certian properties to highlight.
 8
 9### Simple Example:
10
11```scheme
12(property_identifier) @property
13```
14
15```ts
16const font: FontFamily = {
17    weight: "normal",
18    underline: false,
19    italic: false,
20}
21```
22
23Match a property identifier and highlight it using the identifier `@property`. In the above example, `weight`, `underline`, and `italic` would be highlighted.
24
25### Complex example:
26
27```scheme
28(_
29  return_type: (type_annotation
30    [
31      (type_identifier) @type.return
32      (generic_type
33          name: (type_identifier) @type.return)
34    ]))
35```
36
37```ts
38function buildDefaultSyntax(colorScheme: Theme): Partial<Syntax> {
39    // ...
40}
41```
42
43Match a function return type, and highlight the type using the identifier `@type.return`. In the above example, `Partial` would be highlighted.
44
45### Example - Typescript
46
47Here is an example portion of our `highlights.scm` for TypeScript:
48
49```scheme
50; crates/zed/src/languages/typescript/highlights.scm
51
52; Variables
53
54(identifier) @variable
55
56; Properties
57
58(property_identifier) @property
59
60; Function and method calls
61
62(call_expression
63  function: (identifier) @function)
64
65(call_expression
66  function: (member_expression
67    property: (property_identifier) @function.method))
68
69; Function and method definitions
70
71(function
72  name: (identifier) @function)
73(function_declaration
74  name: (identifier) @function)
75(method_definition
76  name: (property_identifier) @function.method)
77
78; ...
79```