mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-27 13:44:09 +03:00
Add initial syntax highlighting doc
This commit is contained in:
parent
ffd1190cca
commit
f0138a7a87
79
docs/zed/syntax-highlighting.md
Normal file
79
docs/zed/syntax-highlighting.md
Normal file
@ -0,0 +1,79 @@
|
||||
# Syntax Highlighting in Zed
|
||||
|
||||
This doc is a work in progress!
|
||||
|
||||
## Defining syntax highlighting rules
|
||||
|
||||
We use tree-sitter queries to match certian properties to highlight.
|
||||
|
||||
### Simple Example:
|
||||
|
||||
```scheme
|
||||
(property_identifier) @property
|
||||
```
|
||||
|
||||
```ts
|
||||
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:
|
||||
|
||||
```scheme
|
||||
(_
|
||||
return_type: (type_annotation
|
||||
[
|
||||
(type_identifier) @type.return
|
||||
(generic_type
|
||||
name: (type_identifier) @type.return)
|
||||
]))
|
||||
```
|
||||
|
||||
```ts
|
||||
function buildDefaultSyntax(colorScheme: ColorScheme): 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:
|
||||
|
||||
```scheme
|
||||
; 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)
|
||||
|
||||
; ...
|
||||
```
|
Loading…
Reference in New Issue
Block a user