Exciting release!Introducing "safe npm". Learn more
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


Syntax highlighting support for additional languages in monaco editor.


Version published
Weekly downloads
increased by4.99%

Weekly downloads




npm version

An alternative tokenizer for monaco-editor using ace's tokenization. See demo. Try to select kotlin or elixir in the demo.

This 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.

I have observed that syntax highlighting for a particular language is better with ace's tokenizer when compared to it's monarch counterpart. This may not be true for all the languages (I observed for clojure) though.


npm install monaco-ace-tokenizer import * as monaco from 'monaco-editor'; import { registerRulesForLanguage } from 'monaco-ace-tokenizer'; import KotlinHighlightRules from 'monaco-ace-tokenizer/lib/ace/definitions/kotlin'; monaco.languages.register({ id: 'kotlin', }); registerRulesForLanguage('kotlin', new KotlinHighlightRules());

This 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. 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 -

  • somelang.js
import { TextHighlightRules, DocCommentHighlightRules, oop } from 'monaco-ace-tokenizer'; // Copied syntax file var SomeLangHighlightRules = function() { // internal defintions you probably don't need to change // unless there is some extra dependency other that the 3 already imported. } oop.inherits(SomeLangHighlightRules, TextHighlightRules); export default SomeLangHighlightRules; // some lang files may also depend on DocCommentHighlightRules

This file can then be used as -

import * as monaco from 'monaco-editor'; import { registerRulesForLanguage } from 'monaco-ace-tokenizer'; import SomeLangHighlightRules from './somelang'; // in your project directory const langId = 'somelang'; monaco.languages.register({ id: langId, }); registerRulesForLanguage(langId, new SomeLangHighlightRules());

If some language definition file requires any other dependency, you can copy over that file too to your project and modify accordingly.

An array of all available languages in monaco-ace-tokenizer is also exported in case you need it.

import { AVAILABLE_LANGUAGES } from 'monaco-ace-tokenizer';

See 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.


If you are using the official guide to integrate AMD version of monaco, this is how you can use monaco-ace-tokenizer -

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor/min/vs', 'tokenizer': 'https://unpkg.com/monaco-ace-tokenizer/dist', } }); require(['vs/editor/editor.main', 'tokenizer/monaco-tokenizer', 'tokenizer/definitions/kotlin'], function(a, MonacoAceTokenizer, KotlinDefinition) { monaco.languages.register({ id: 'kotlin' }); MonacoAceTokenizer.registerRulesForLanguage('kotlin', new KotlinDefinition.default); var editor = monaco.editor.create(document.getElementById('container'), { value: '', language: 'kotlin' }); }); /* To load All languages */ require(['vs/editor/editor.main', 'tokenizer/monaco-tokenizer'], function(_, MonacoAceTokenizer) { MonacoAceTokenizer.AVAILABLE_LANGUAGES.forEach(lang => { require(['tokenizer/definitions/' + lang], function(LangDefinition) { monaco.languages.register({ id: lang, }); MonacoAceTokenizer.registerRulesForLanguage(lang, new LangDefinition.default); }); }); }); </script> </body> </html>



Last updated on 26 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc