monaco-ace-tokenizer
Advanced tools
Syntax highlighting support for additional languages in monaco editor.
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.jsimport { 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>
FAQs
Syntax highlighting support for additional languages in monaco editor.
The npm package monaco-ace-tokenizer receives a total of 1,437 weekly downloads. As such, monaco-ace-tokenizer popularity was classified as popular.
We found that monaco-ace-tokenizer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.