{"id":21348151,"url":"https://github.com/brijeshb42/monaco-ace-tokenizer","last_synced_at":"2025-07-12T17:32:16.927Z","repository":{"id":43294531,"uuid":"145450626","full_name":"brijeshb42/monaco-ace-tokenizer","owner":"brijeshb42","description":"Syntax highlighting support for additional languages in monaco-editor","archived":false,"fork":false,"pushed_at":"2023-01-26T08:36:53.000Z","size":412,"stargazers_count":89,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T23:12:19.366Z","etag":null,"topics":["monaco-editor"],"latest_commit_sha":null,"homepage":"https://editor.bitwiser.in/","language":"JavaScript","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/brijeshb42.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":"2018-08-20T17:39:37.000Z","updated_at":"2025-03-16T19:14:20.000Z","dependencies_parsed_at":"2023-02-14T15:31:17.305Z","dependency_job_id":null,"html_url":"https://github.com/brijeshb42/monaco-ace-tokenizer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/brijeshb42/monaco-ace-tokenizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-ace-tokenizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-ace-tokenizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-ace-tokenizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-ace-tokenizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brijeshb42","download_url":"https://codeload.github.com/brijeshb42/monaco-ace-tokenizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brijeshb42%2Fmonaco-ace-tokenizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265025570,"owners_count":23699773,"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":["monaco-editor"],"created_at":"2024-11-22T02:18:08.292Z","updated_at":"2025-07-12T17:32:16.591Z","avatar_url":"https://github.com/brijeshb42.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## monaco-ace-tokenizer\n\n[![npm version](https://badge.fury.io/js/monaco-ace-tokenizer.svg)](https://www.npmjs.com/package/monaco-ace-tokenizer)\n\nAn alternative tokenizer for monaco-editor using `ace`'s tokenization. See [demo](https://editor-a5ea1.firebaseapp.com). Try to select `kotlin` or `elixir` in the demo.\n\nThis library is relevant only till monarch definitions of all the remaining languages are added directly in `monaco-editor` itself. Untill then, it can be used if you do not want to use web assembly.\n\nI have observed that syntax highlighting for a particular language is better\nwith ace's tokenizer when compared to it's monarch counterpart. This may not be\ntrue for all the languages (I observed for clojure) though.\n\n### Install\n\n#### Webpack/browserify\n```sh\nnpm install monaco-ace-tokenizer\n```\n\n```js\nimport * as monaco from 'monaco-editor';\nimport { registerRulesForLanguage } from 'monaco-ace-tokenizer';\nimport KotlinHighlightRules from 'monaco-ace-tokenizer/lib/ace/definitions/kotlin';\n\nmonaco.languages.register({\n  id: 'kotlin',\n});\nregisterRulesForLanguage('kotlin', new KotlinHighlightRules());\n```\n\nThis repo already contains definitions for 18 languages not yet available directly in monaco. If you need highlighting for a language which is not available here, you can copy over files from original ace project to your own project and modify it such that it's `default` export is the rule `class`. Check out any of the definition files already available in [src/ace/defintions](https://github.com/brijeshb42/monaco-ace-tokenizer/tree/master/src/ace/definitions/). Most of the highlight rules require `TextHighlightRules`, `DocCommentHighlightRules` and `oop`. They are directly exported in this project so that you don't have to modify the copied file too much. Example -\n\n- `somelang.js`\n\n```js\nimport { TextHighlightRules, DocCommentHighlightRules, oop } from 'monaco-ace-tokenizer';\n\n// Copied syntax file\nvar SomeLangHighlightRules = function() {\n  // internal defintions you probably don't need to change\n  // unless there is some extra dependency other that the 3 already imported.\n}\noop.inherits(SomeLangHighlightRules, TextHighlightRules);\n\nexport default SomeLangHighlightRules;\n// some lang files may also depend on DocCommentHighlightRules\n```\n\nThis file can then be used as -\n\n```js\nimport * as monaco from 'monaco-editor';\nimport { registerRulesForLanguage } from 'monaco-ace-tokenizer';\nimport SomeLangHighlightRules from './somelang'; // in your project directory\n\nconst langId = 'somelang';\nmonaco.languages.register({\n  id: langId,\n});\nregisterRulesForLanguage(langId, new SomeLangHighlightRules());\n```\n\nIf some language definition file requires any other dependency, you can copy over that file too to your project and modify accordingly.\n\nAn array of all available languages in `monaco-ace-tokenizer` is also exported in case you need it.\n\n```js\nimport { AVAILABLE_LANGUAGES } from 'monaco-ace-tokenizer';\n```\n\nSee [src/lazy.js](https://github.com/brijeshb42/monaco-ace-tokenizer/tree/master/src/lazy.js) if you want to register languages but only load their definitions dynamically when they are used for the first time in your editor.\n\n#### AMD\n\nIf you are using the official guide to integrate AMD version of monaco, this is how you can use `monaco-ace-tokenizer` -\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n  \u003cmeta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" \u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"container\" style=\"width:800px;height:600px;border:1px solid grey\"\u003e\u003c/div\u003e\n\n  \u003cscript src=\"https://unpkg.com/monaco-editor/min/vs/loader.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    require.config({\n      paths: {\n        'vs': 'https://unpkg.com/monaco-editor/min/vs',\n        'tokenizer': 'https://unpkg.com/monaco-ace-tokenizer/dist',\n      }\n    });\n    require(['vs/editor/editor.main', 'tokenizer/monaco-tokenizer', 'tokenizer/definitions/kotlin'], function(a, MonacoAceTokenizer, KotlinDefinition) {\n      monaco.languages.register({\n        id: 'kotlin'\n      });\n      MonacoAceTokenizer.registerRulesForLanguage('kotlin', new KotlinDefinition.default);\n      var editor = monaco.editor.create(document.getElementById('container'), {\n        value: '',\n        language: 'kotlin'\n      });\n    });\n    /* To load All languages */\n    require(['vs/editor/editor.main', 'tokenizer/monaco-tokenizer'], function(_, MonacoAceTokenizer) {\n      MonacoAceTokenizer.AVAILABLE_LANGUAGES.forEach(lang =\u003e {\n        require(['tokenizer/definitions/' + lang], function(LangDefinition) {\n          monaco.languages.register({\n            id: lang,\n          });\n          MonacoAceTokenizer.registerRulesForLanguage(lang, new LangDefinition.default);\n        });\n      });\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijeshb42%2Fmonaco-ace-tokenizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrijeshb42%2Fmonaco-ace-tokenizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrijeshb42%2Fmonaco-ace-tokenizer/lists"}