{"id":15144368,"url":"https://github.com/s0/gatsby-remark-tree-sitter","last_synced_at":"2026-05-04T10:32:22.418Z","repository":{"id":57244862,"uuid":"192217828","full_name":"s0/gatsby-remark-tree-sitter","owner":"s0","description":"Gatsby plugin to highlight code in Markdown files using tree-sitter","archived":false,"fork":false,"pushed_at":"2019-06-16T20:17:03.000Z","size":5,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-02T16:44:12.100Z","etag":null,"topics":["gatsby","gatsby-plugin","markdown","remark","syntax-highlighting","tree-sitter"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gatsby-remark-tree-sitter","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-16T17:20:38.000Z","updated_at":"2021-01-06T17:22:22.000Z","dependencies_parsed_at":"2022-09-01T06:12:14.269Z","dependency_job_id":null,"html_url":"https://github.com/s0/gatsby-remark-tree-sitter","commit_stats":null,"previous_names":["samlanning/gatsby-remark-tree-sitter"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fgatsby-remark-tree-sitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fgatsby-remark-tree-sitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fgatsby-remark-tree-sitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s0%2Fgatsby-remark-tree-sitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s0","download_url":"https://codeload.github.com/s0/gatsby-remark-tree-sitter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247517929,"owners_count":20951716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["gatsby","gatsby-plugin","markdown","remark","syntax-highlighting","tree-sitter"],"created_at":"2024-09-26T10:40:57.733Z","updated_at":"2026-01-20T03:30:57.045Z","avatar_url":"https://github.com/s0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-remark-tree-sitter\n\n[![](https://img.shields.io/npm/v/gatsby-remark-tree-sitter.svg)](https://www.npmjs.com/package/gatsby-remark-tree-sitter)\n\nHighlight code in Markdown files using\n[tree-sitter](https://github.com/tree-sitter/tree-sitter), powered by [remark-tree-sitter](https://github.com/samlanning/remark-tree-sitter).\n\n## Install\n\n```\nnpm install --save gatsby-remark-tree-sitter\n```\n\n## How it works\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](https://github.com/samlanning/remark-tree-sitter#optionsgrammarpackages).\n* Provide the `tree-sitter` grammar and scopeMappings manually,\n  using the using the [`grammars` option](https://github.com/samlanning/remark-tree-sitter#optionsgrammars).\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## How to use\n\nAdd `gatsby-remark-tree-sitter` to the list of plugins for `gatsby-transformer-remark`,\nand list the grammars you want to use in your `gatsby-config.js` file:\n\n**Example:**\n\n```\nnpm install --save @atom-languages/language-typescript\n```\n\n```js\nplugins: [\n  {\n    resolve: `gatsby-transformer-remark`,\n    options: {\n      plugins: [\n        {\n          resolve: \"gatsby-remark-tree-sitter\",\n          options: {\n            grammarPackages: ['@atom-languages/language-typescript']\n          },\n        },\n      ],\n    },\n  },\n]\n```\n\nThis would then render the following markdown:\n\n````markdown\n```typescript\nfunction foo() {\n  return 1;\n}\n```\n````\n\nAs this HTML:\n\n```html\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*Note that either `grammarPackages` or `grammars` **must** be specified in the options.*\n\nFor a list of language packages that you can use in `grammarPackages`, please see [Atom language packages](https://github.com/samlanning/remark-tree-sitter#atom-language-packages).\n\n## Whitelisting classes\n\nSometimes including the full list of classes applied can 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```js\nplugins: [\n  {\n    resolve: `gatsby-transformer-remark`,\n    options: {\n      plugins: [\n        {\n          resolve: \"gatsby-remark-tree-sitter\",\n          options: {\n            grammarPackages: ['@atom-languages/language-typescript'],\n            classWhitelist: ['storage', 'numeric']\n          },\n        },\n      ],\n    },\n  },\n]\n```\n\n...will convert this 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## Full Documentation\n\nFor for full documentation on the options you can use, please see [the documentation for `remark-tree-sitter`](https://github.com/samlanning/remark-tree-sitter#api), as options are passed directly to that plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fgatsby-remark-tree-sitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs0%2Fgatsby-remark-tree-sitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs0%2Fgatsby-remark-tree-sitter/lists"}