{"id":13485072,"url":"https://github.com/s0/remark-tree-sitter","last_synced_at":"2026-06-09T12:01:09.652Z","repository":{"id":47228479,"uuid":"191849953","full_name":"s0/remark-tree-sitter","owner":"s0","description":"Highlight code in Markdown files using tree-sitter and remark","archived":false,"fork":false,"pushed_at":"2022-12-03T13:51:02.000Z","size":813,"stargazers_count":31,"open_issues_count":15,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-07T18:05:12.697Z","etag":null,"topics":["remark","remark-plugin","syntax-highlighting","tree-sitter"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/remark-tree-sitter","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-14T00:21:09.000Z","updated_at":"2025-07-09T09:11:45.000Z","dependencies_parsed_at":"2023-01-22T20:46:19.866Z","dependency_job_id":null,"html_url":"https://github.com/s0/remark-tree-sitter","commit_stats":null,"previous_names":["samlanning/remark-tree-sitter"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/s0/remark-tree-sitter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-tree-sitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-tree-sitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-tree-sitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-tree-sitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s0","download_url":"https://codeload.github.com/s0/remark-tree-sitter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fremark-tree-sitter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34105565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["remark","remark-plugin","syntax-highlighting","tree-sitter"],"created_at":"2024-07-31T17:01:45.012Z","updated_at":"2026-06-09T12:01:09.555Z","avatar_url":"https://github.com/s0.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# remark-tree-sitter\n\n[![Build Status](https://dev.azure.com/samlanning/tree-sitter/_apis/build/status/remark-tree-sitter?branchName=master)](https://dev.azure.com/samlanning/tree-sitter/_build/latest?definitionId=3\u0026branchName=master) [![Total alerts](https://img.shields.io/lgtm/alerts/g/samlanning/remark-tree-sitter.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/samlanning/remark-tree-sitter/alerts/) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/samlanning/remark-tree-sitter.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/samlanning/remark-tree-sitter/context:javascript) [![](https://img.shields.io/npm/v/remark-tree-sitter.svg)](https://www.npmjs.com/package/remark-tree-sitter)\n\nHighlight code in Markdown files using\n[tree-sitter](https://github.com/tree-sitter/tree-sitter) and\n[remark][].\nPowered by [tree-sitter-hast](https://github.com/samlanning/tree-sitter-hast).\n\n## Installation\n\n```bash\nnpm install remark-tree-sitter\n```\n\nor\n\n```bash\nyarn add remark-tree-sitter\n```\n\n## Usage\n\nThis plugin uses the same mechanism and data as Atom for syntax highlighting,\nSo to highlight a particular language, you need to either:\n\n* Install the APM (Atom) package for that language and tell `remark-tree-sitter`\n  to import it, using the [`grammarPackages` option](#options.grammarpackages).\n  *(See [Atom language packages](#atom-language-packages))*\n* Provide the `tree-sitter` grammar and scopeMappings manually,\n  using the using the [`grammars` option](#options.grammars).\n\n*For more information on how this mechanism works,\n[check out the documentation for `tree-sitter-hast`](https://github.com/samlanning/tree-sitter-hast#scope-mappings).*\n\nAny code blocks that are encountered for which there is not a matching language will be ignored.\n\n### Example\n\nThe following example is also in the [examples](examples/) directory\nand can be run directly from there.\nIt uses `@atom-languages/language-typescript` to provide the TypeScript grammar and \n\n```\nnpm install to-vfile vfile-reporter remark remark-tree-sitter remark-html @atom-languages/language-typescript\n```\n\n[`examples/example.js`](examples/example.js)\n```js\nconst vfile = require('to-vfile')\nconst report = require('vfile-reporter')\nconst remark = require('remark')\nconst treeSitter = require('remark-tree-sitter')\nconst html = require('remark-html')\n\nremark()\n  .use(treeSitter, {\n    grammarPackages: ['@atom-languages/language-typescript']\n  })\n  .use(html)\n  .process(vfile.readSync('example.md'), (err, file) =\u003e {\n    console.error(report(err || file))\n    console.log(String(file))\n  })\n```\n\n**Output:**\n\n```html\nexample.md: no issues found\n\u003cpre\u003e\u003ccode class=\"tree-sitter language-typescript\"\u003e\u003cspan class=\"source ts\"\u003e\u003cspan class=\"storage type function\"\u003efunction\u003c/span\u003e \u003cspan class=\"entity name function\"\u003efoo\u003c/span\u003e\u003cspan class=\"punctuation definition parameters begin bracket round\"\u003e(\u003c/span\u003e\u003cspan class=\"punctuation definition parameters end bracket round\"\u003e)\u003c/span\u003e \u003cspan class=\"punctuation definition function body begin bracket curly\"\u003e{\u003c/span\u003e\n  \u003cspan class=\"keyword control\"\u003ereturn\u003c/span\u003e \u003cspan class=\"constant numeric\"\u003e1\u003c/span\u003e\u003cspan class=\"punctuation terminator statement semicolon\"\u003e;\u003c/span\u003e\n\u003cspan class=\"punctuation definition function body end bracket curly\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n```\n\n## Atom language packages\n\nTo use an Atom language package,\nlike any package you first need to install it using `npm install` or `yarn add`.\nUnfortunately most **APM** packages are not made available on **NPM**,\nso I've started to make some of them available under the NPM organization\n[`@atom-languages`](https://www.npmjs.com/org/atom-languages).\nHere's a list of packages with which languages they provide highlighting for.\n\n* [`@atom-languages/language-typescript`](https://www.npmjs.com/package/@atom-languages/language-typescript):\n  `typescript`, `tsx` (TypeScriptReact), `flow`\n\n## API\n\n### `remark.use(treeSitter, options)`\n\nNote that `options` is required, and either `grammarPackages` or `grammars` needs to be provided. (Both can be provided, and grammars specified in `grammars` will overide those loaded in `grammarPackages`).\n\n#### `options.grammarPackages`\n\nAn array of all [Atom language packages](#atom-language-packages) that should be loaded.\n\n**Example:**\n\n```ts\nremark().use(treeSitter, {\n    grammarPackages: ['@atom-languages/language-typescript']\n  })\n```\n\nThe language names that code blocks must then use\nto refer to a language is based on the filenames in the atom package.\nFor example the above package\n[has the files](https://github.com/atom/language-typescript/tree/master/grammars):\n`tree-sitter-flow.cson`, `tree-sitter-tsx.cson`, `tree-sitter-typescript.cson`...\nso this will make the languages `flow`, `tsx` and `typescript`\navailable for use within code blocks.\n\nIf you want to make loaded languages available to use via different names,\nyou can use [`options.languageAliases`](#options.languagealiases).\n\n#### `options.grammars`\n\nAn object mapping language keys objects containing `grammar` and `scopeMappings`.\n\nAnything specified here will overwrite the languages loaded by [`options.grammarPackages`](#options.grammarpackages).\n\n*For more information on scopeMappings, [check out the documentation for `tree-sitter-hast`](https://github.com/samlanning/tree-sitter-hast#scope-mappings).*\n\n**Example:**\n\nSee a working example at [`examples/example-grammars.js`](examples/example-grammars.js).\n\n```ts\nremark().use(treeSitter, {\n    grammars: {\n      typescript: {\n        grammar: typescriptGrammar,\n        scopeMappings: typescriptScopeMappings\n      },\n      'custom-language': {\n        grammar: customLanguageGrammar,\n        scopeMappings: customLanguageScopeMappings\n      }\n    }\n  })\n```\n\nYou can then use both the `typescript` and `custom-language` languages in code blocks:\n\n````md\n```custom-language\nsome code\n```\n\n```typescript\nlet foo = 'bar';\n```\n````\n\nIf you want to make loaded languages available to use via different names,\nyou can use [`options.languageAliases`](#options.languagealiases).\n\n#### `options.classWhitelist`\n\nSometimes including the full list of classes applied by the scope mappings\ncan be too much,\nand you'd like to only include those that you have stylesheets for.\n\nTo do this, you can pass in a whitelist of classes that you actually care about.\n\n**Example:** The following configuration...\n\n```ts\nremark().use(treeSitter, {\n    grammarPackages: ['@atom-languages/language-typescript'],\n    classWhitelist: ['storage', 'numeric']\n  })\n```\n\n...will convert the following markdown...\n\n````md\n```typescript\nfunction foo() {\n  return 1;\n}\n```\n````\n\n...to this:\n\n```html\n\u003cpre\u003e\u003ccode class=\"tree-sitter language-typescript\"\u003e\u003cspan\u003e\u003cspan class=\"storage\"\u003efunction\u003c/span\u003e foo() {\n  return \u003cspan class=\"numeric\"\u003e1\u003c/span\u003e;\n}\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n```\n\n\n#### `options.languageAliases`\n\n*TODO: `options.languageAliases` is not implemented yet*\n\nTODO:\n\n* Add unit tests for `grammars` option\n\n## Related\n\n*   [`remark-rehype`](https://github.com/remarkjs/remark-rehype)\n    — Transform Markdown to HTML\n*   [`remark-midas`](https://github.com/remarkjs/remark-midas)\n    — Highlight CSS code blocks with midas (rehype compatible)\n*   [`remark-highlight.js`](https://github.com/remarkjs/remark-highlight.js)\n    — Highlight code with highlight.js (via lowlight)\n*   [`remark-code-frontmatter`](https://github.com/samlanning/remark-code-frontmatter)\n    — Extract frontmatter from markdown code blocks\n*   [`remark-code-extra`](https://github.com/samlanning/remark-code-extra)\n    — Add to or transform the HTML output of code blocks (rehype compatible)\n*   [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight)\n    — [rehype][] plugin to highlight code (via lowlight)\n*   [`rehype-prism`](https://github.com/mapbox/rehype-prism)\n    — [rehype][] plugin to highlight code (via refractor)\n*   [`rehype-shiki`](https://github.com/rsclarke/rehype-shiki)\n    — [rehype][] plugin to highlight code with shiki\n\n\u003c!-- Definitions --\u003e\n\n[remark]: https://github.com/remarkjs/remark\n\n[rehype]: https://github.com/rehypejs/rehype","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fremark-tree-sitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs0%2Fremark-tree-sitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fremark-tree-sitter/lists"}