# highlight-tree-sitter > helpers for using tree-sitter for highlighting static code Latest version **1.0.0** (published 2018-12-05) · ISC license · 0 weekly downloads ## Install ```sh npm install highlight-tree-sitter pnpm add highlight-tree-sitter yarn add highlight-tree-sitter bun add highlight-tree-sitter ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2018-12-05 | | First published | 2018-12-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 264.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Shaun Lebron | | Maintainers | shaunlebron | ## Links - npm: https://www.npmjs.com/package/highlight-tree-sitter - Repository: https://github.com/shaunlebron/highlight-tree-sitter - Homepage: https://github.com/shaunlebron/highlight-tree-sitter#readme - Issues: https://github.com/shaunlebron/highlight-tree-sitter/issues - npm.io page: https://npm.io/package/highlight-tree-sitter ## Dependencies (1) - [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^5.0.0-rc.4 ## Recent versions - 1.0.0 (latest) — 2018-12-05 ## README # Highlight Tree Sitter Low-level helpers for using [node-tree-sitter] to syntax-highlight static code (e.g. outputting HTML). **Background**: [Atom uses tree-sitter][scope mappings] since it is a fast way to use proper grammars in an editor, removing the need for hacky regexes. Tree-sitter can also be used for more accurate syntax-highlighting of static code for displaying on web pages. It can be frustrating to encounter corner cases when the grammar pukes and throws off the color of an entire file. ## Features This is currently only a **low-level API** for accomplishing the following: - **generate HTML snippets** for syntax-highlighting static code - **pretty-print s-expressions** of syntax trees for learning - **provide a platform for analysis** so it can be used for generating other things, like say: - wrapping recognized symbols in `` links for docs - outputting ansi-highlighted code for terminal, or other formats ## Run the demo Run [demo.js](demo.js) to see the following example for highlighting JavaScript: ``` npm install node demo.js ``` ## Learn! _Code below is a walkthrough of what the above demo does_ Suppose we have the following JavaScript code we want to highlight: ``` function foo() { return 1; } ``` **Partial Tree**: Passing it to `partialSexp` will create the partial tree seen below—not containing any actual source text, and only displaying what are called _named_ nodes, giving you an overview of the syntax tree. _NOTE: This s-expression format is what tree-sitter uses in its own test cases, but we provide a facility to represent it as arrays and to print it with proper formatting using `printSexp`, which is used in these examples)_ ``` (program (function (identifier) (formal_parameters) (statement_block (return_statement (number))))) ``` **Full Tree**: Passing it to `fullSexp` will instead create a full tree, with source text and whitespace with a root node `_root` capturing outer whitespace, and anonymous nodes `_anon` capturing what tree-sitter calls _unnamed nodes_. ``` (_root "\n" (program (function (_anon "function") " " (identifier "foo") (formal_parameters (_anon "(") (_anon ")")) " " (statement_block (_anon "{") "\n " (return_statement (_anon "return") " " (number "1") (_anon ";")) "\n" (_anon "}"))))) ``` **Annotated Tree**: Passing the full tree to `highlightSexp` with Atom's [javascript grammar scopes][js-scopes] (see [scope mappings]) produces the tree below. Each syntax node is annotated with matching class names from the scope mappings: ``` (_root "\n" (program.source.js (function (_anon.storage.type "function") " " (identifier.entity.name.function "foo") (formal_parameters (_anon.punctuation.definition.parameters.begin.bracket.round "(") (_anon.punctuation.definition.parameters.end.bracket.round ")")) " " (statement_block (_anon.punctuation.definition.function.body.begin.bracket.curly "{") "\n " (return_statement (_anon.keyword.control "return") " " (number.constant.numeric "1") (_anon ";")) "\n" (_anon.punctuation.definition.function.body.end.bracket.curly "}"))))) ``` **Highlight Tree**: Since we do not need any unannotated syntax nodes, we create a new tree with only the highlighted nodes, flattening all others: ``` (_root "\n" (program.source.js (_anon.storage.type "function") " " (identifier.entity.name.function "foo") (_anon.punctuation.definition.parameters.begin.bracket.round "(") (_anon.punctuation.definition.parameters.end.bracket.round ")") " " (_anon.punctuation.definition.function.body.begin.bracket.curly "{") "\n " (_anon.keyword.control "return") " " (number.constant.numeric "1") ";\n" (_anon.punctuation.definition.function.body.end.bracket.curly "}"))) ``` **HTML output**: We can then directly map the highlight tree s-expressions to html span tags below: ``` function foo() { return 1; } ``` ## API For the following signatures, `tree` is the output of tree-sitter parser on `text`, and `sexp` is nested array of strings and arrays (s-expressions). - `partialSexp(tree) => sexp` - create partial s-expression from tree (no text or unnamed nodes) - `fullSexp(text, tree) => sexp` - create full s-expression from source text and tree - `printSexp(sexp) => str` - pretty-print an s-expression Highlighting: - `highlightSexpFromScopes(sexp, scopes) => { html, sexp }` - highlight using Atom [scope mappings] ## Dev The s-expression pretty-printer is compiled ClojureScript code. To rebuild: ``` npm run build ``` [tree-sitter]:https://github.com/tree-sitter/tree-sitter [node-tree-sitter]:https://github.com/tree-sitter/node-tree-sitter [scope mappings]:https://flight-manual.atom.io/hacking-atom/sections/creating-a-grammar/#syntax-highlighting [js-scopes]:https://github.com/atom/language-javascript/blob/v0.129.18/grammars/tree-sitter-javascript.cson#L58 --- _Source: https://npm.io/package/highlight-tree-sitter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._