{"id":19065480,"url":"https://github.com/menci/monaco-tree-sitter","last_synced_at":"2025-04-28T11:28:32.035Z","repository":{"id":43981430,"uuid":"245173436","full_name":"Menci/monaco-tree-sitter","owner":"Menci","description":"Highlight your Monaco Editor with tree-sitter grammar.","archived":false,"fork":false,"pushed_at":"2023-01-07T15:38:59.000Z","size":845,"stargazers_count":43,"open_issues_count":19,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T15:17:27.852Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Menci.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":"2020-03-05T13:41:42.000Z","updated_at":"2025-03-16T18:58:37.000Z","dependencies_parsed_at":"2023-02-07T13:32:15.666Z","dependency_job_id":null,"html_url":"https://github.com/Menci/monaco-tree-sitter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Menci%2Fmonaco-tree-sitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Menci%2Fmonaco-tree-sitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Menci%2Fmonaco-tree-sitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Menci%2Fmonaco-tree-sitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Menci","download_url":"https://codeload.github.com/Menci/monaco-tree-sitter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251304147,"owners_count":21567823,"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":[],"created_at":"2024-11-09T00:50:25.263Z","updated_at":"2025-04-28T11:28:32.016Z","avatar_url":"https://github.com/Menci.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monaco tree-sitter\nHighlight your Monaco Editor with tree-sitter grammar.\n\n[![Build Status](https://img.shields.io/travis/Menci/monaco-tree-sitter?style=flat-square)](https://travis-ci.org/Menci/monaco-tree-sitter)\n[![Dependencies](https://img.shields.io/david/Menci/monaco-tree-sitter?style=flat-square)](https://david-dm.org/Menci/monaco-tree-sitter)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![License](https://img.shields.io/github/license/Menci/monaco-tree-sitter?style=flat-square)](LICENSE)\n\n# Install\nInstall via NPM:\n\n```bash\n$ yarn add monaco-tree-sitter\n```\n\n# Use\nYou can use it with Webpack. You'll need [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin) to load Monaco Editor and [file-loader](https://webpack.js.org/loaders/file-loader/) to load WASM.\n\nNotice that the Webpack support of [web-tree-sitter](https://github.com/tree-sitter/tree-sitter) is broken, see [tree-sitter/tree-sitter#559](https://github.com/tree-sitter/tree-sitter/issues/559) for detail and [`demo`](demo) for a workaround.\n\nThe minimal Webpack config required is like:\n\n```js\nmodule: {\n  rules: [\n    // This is required for web-tree-sitter\n    {\n      test: /\\.wasm$/,\n      loader: \"file-loader\",\n      type: \"javascript/auto\" // Disable Webpack's built-in WASM loader\n    },\n    // These two are required for monaco-editor-webpack-plugin\n    // See https://github.com/microsoft/monaco-editor-webpack-plugin\n    {\n      test: /\\.css$/,\n      use: [\"style-loader\", \"css-loader\"]\n    },\n    {\n      test: /\\.ttf$/,\n      use: [\"file-loader\"]\n    }\n  ]\n},\nplugins: [\n  new MonacoWebpackPlugin()\n],\nnode: {\n  fs: \"empty\" // See https://github.com/tree-sitter/tree-sitter/issues/466\n}\n```\n\nAfter setting-up Webpack, you can starting using it in your project.\n\nFirst, you need a *theme*, a theme file is like [`tomorrow.json`](themes/tomorrow.json) in the [themes](themes) directory, containing theme for both monaco-editor and our highlighter based on tree-sitter. Load it with:\n\n```ts\nimport { Theme } from \"monaco-tree-sitter\";\n\nTheme.load(require(\"monaco-tree-sitter/themes/tomorrow\"));\n```\n\nYou also need to initialize `web-tree-sitter`, the bind library for tree-sitter:\n\n```ts\nimport Parser = require(\"web-tree-sitter\");\nimport { Theme } from \"monaco-tree-sitter\";\n\nTheme.load(require(\"monaco-tree-sitter/themes/tomorrow\"));\n\n(async () =\u003e {\n  await Parser.init().then(/* initialized */);\n})();\n```\n\nTo parse a language with tree-sitter, you need the language's parser. A full list of supported languages by tree-sitter is available [here](https://tree-sitter.github.io/tree-sitter/#available-parsers). There're also official prebuilt WASM binaries [here](https://github.com/tree-sitter/tree-sitter.github.io) can be downloaded.\n\nTree-sitter could only give us the AST of the code. To highlight we need some grammar rules (one rule is like: an identifier in an call expression is a function name). You can find the grammar rules for various languages in the [grammars](grammars) directory.\n\n```ts\nimport Parser = require(\"web-tree-sitter\");\nimport { Theme, Language } from \"monaco-tree-sitter\";\nimport treeSitterCpp from \"./tree-sitter-cpp.wasm\"; // Path to the language parser library WASM file\n\nTheme.load(require(\"monaco-tree-sitter/themes/tomorrow\"));\n\n(async () =\u003e {\n  await Parser.init();\n  \n  // Load the language's grammar rules\n  const language = new Language(require(\"monaco-tree-sitter/grammars/cpp\"));\n  // Load the language's parser library's WASM binary\n  await language.init(treeSitterCpp, Parser);\n})();\n```\n\nSince this module provides highlighting both for Monaco Editor and without Monaco Editor. For better Webpack code splitting, we don't import `monaco-editor` module and you should provide the module you imported to us.\n\nCreate your Monaco Editor and apply the highlight on it:\n\n```ts\nimport Monaco = require(\"monaco-editor\");\nimport Parser = require(\"web-tree-sitter\");\nimport { Theme, Language } from \"monaco-tree-sitter\";\nimport treeSitterCpp from \"./tree-sitter-cpp.wasm\"; // Path to the language parser library WASM file\n\nTheme.load(require(\"monaco-tree-sitter/themes/tomorrow\"));\n\n(async () =\u003e {\n  await Parser.init();\n  \n  // Load the language's grammar rules\n  const language = new Language(require(\"monaco-tree-sitter/grammars/cpp\"));\n  // Load the language's parser library's WASM binary\n  await language.init(treeSitterCpp, Parser);\n\n  window.editor = Monaco.editor.create(document.body, {\n    value: \"int main() { return 0; }\",\n    // This \"language\" property only affects the monaco-editor's built-in syntax highlighter\n    language: \"cpp\"\n  });  \n\n  const monacoTreeSitter = new MonacoTreeSitter(Monaco, editor, language);\n\n  // You can change the language with monacoTreeSitter.changeLanguage()\n  // Or change the theme with Theme.load()\n  // Remember to refresh highlight with monacoTreeSitter.refresh() after changing the theme.\n})();\n```\n\n# Highlight\nYou can also use this module just as a code highlighter. In this case you don't need a Monaco Editor.\n\nFirst, load a theme and initialize your language as above. Then just call the `highlight()` function:\n\n```ts\nimport Parser = require(\"web-tree-sitter\");\nimport { Theme, Language } from \"monaco-tree-sitter\";\nimport treeSitterCpp from \"./tree-sitter-cpp.wasm\"; // Path to the language parser library WASM file\n\nTheme.load(require(\"monaco-tree-sitter/themes/tomorrow\"));\n\n(async () =\u003e {\n  await Parser.init();\n  \n  // Load the language's grammar rules\n  const language = new Language(require(\"monaco-tree-sitter/grammars/cpp\"));\n  // Load the language's parser library's WASM binary\n  await language.init(treeSitterCpp, Parser);\n\n  document.body.innerHTML = highlight(cppCode, language);\n\n  // You can use highlight(code, language, true) to generate self-contained HTML code.\n  // i.e. Use inline style instead of class name.\n})();\n```\n\n# Demo\nYou can find a demo in the [demo](demo) directory. Just `yarn build` and `python3 -m http.server` then open it in your browser.\n\n# License\nThis project is licensed under the MIT license.\n\n# Credits\nThis project used code and assets from:\n\n* [{Syntax Highlighter}](https://github.com/EvgeniyPeshkov/syntax-highlighter)\n* [Tree Sitter for VSCode](https://github.com/georgewfraser/vscode-tree-sitter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmenci%2Fmonaco-tree-sitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmenci%2Fmonaco-tree-sitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmenci%2Fmonaco-tree-sitter/lists"}