Highlighting source code with tree-sitter

By Jeff Kreeftmeijer on 2024-05-10

After installing tree-sitter, highlighting a Ruby file fails because there are no language grammars installed:

tree-sitter highlight example.rb

Warning: You have not configured any parser directories!
Please run `tree-sitter init-config` and edit the resulting
configuration file to indicate where we should look for
language grammars.

No language found for path `example.rb`

If a language should be associated with this file extension, please ensure the path to `example.rb` is inside one of the following directories as specified by your 'config.json':



If the directory that contains the relevant grammar for `example.rb` is not listed above, please add the directory to the list of directories in your config file, which you need to create by running `tree-sitter init-config`

To set up languages, the tree-sitter utility expects a configuration file. One can be created by executing

tree-sitter init-config

which generates a configuration file in a platform-specific location. The generated file defines a list of directories to search to find parser libraries, and a default theme for highlighting:

Listing 1: /Users/jeff/Library/Application Support/tree-sitter/config.json

  {
  "parser-directories": [
    "/Users/jeff/github",
    "/Users/jeff/src",
    "/Users/jeff/source"
  ],
  "theme": {
    "attribute": {
      "italic": true,
      "color": 124
    },
    "constant.builtin": {
      "bold": true,
      "color": 94
    },
    "keyword": 56,
    "property": 124,
    "operator": {
      "bold": true,
      "color": 239
    },
    "punctuation.bracket": 239,
    "tag": 18,
    "constant": 94,
    "variable.parameter": {
      "underline": true
    },
    "type": 23,
    "variable.builtin": {
      "bold": true
    },
    "punctuation.delimiter": 239,
    "constructor": 136,
    "function.builtin": {
      "bold": true,
      "color": 26
    },
    "number": {
      "bold": true,
      "color": 94
    },
    "string.special": 30,
    "function": 26,
    "module": 136,
    "string": 28,
    "embedded": null,
    "type.builtin": {
      "bold": true,
      "color": 23
    },
    "comment": {
      "color": 245,
      "italic": true
    }
  }
}

Since tree-sitter version 0.22, a local configuration file can also be used. For example, this configuration file omits the theme but includes a single parser directory pointing to the current directory.

Listing 2: config.json

{
  "parser-directories": ["."]
}

In this case, the current directory has a local of the tree-sitter Ruby grammar. Tree-sitter searches each parser directory for sub directories with names starting with tree-sitter-¹.

tree-sitter highlight --config-path config.json --html example.rb


<!doctype HTML>
<head>
  <title>Tree-sitter Highlighting</title>
  <style>
    body {
      font-family: monospace
    }
    .line-number {
      user-select: none;
      text-align: right;
      color: rgba(27,31,35,.3);
      padding: 0 10px;
    }
    .line {
      white-space: pre;
    }
  </style>
</head>
<body>

<table>
<tr><td class=line-number>1</td><td class=line><span style='color: #5f00d7'>def</span> <span style='color: #005fd7'>main</span>
</td></tr>
<tr><td class=line-number>2</td><td class=line>  <span style='color: #008700'>&quot;hello, world&quot;</span>
</td></tr>
<tr><td class=line-number>3</td><td class=line><span style='color: #5f00d7'>end</span>
</td></tr>
</table>

</body>

Use the tree-sitter dump-languages to ensure the grammars in the configuration file are loaded correctly:

tree-sitter dump-languages --config-path config.json

scope: source.ruby
parser: "/Users/jeff/tree-sitter-highlight/tree-sitter-ruby/"
highlights: Some(["queries/highlights.scm"])
file_types: ["rb"]
content_regex: None
injection_regex: Some(Regex("ruby"))

↩︎